【问题标题】:Set div background color based on a percent (like progress bar)根据百分比设置 div 背景颜色(如进度条)
【发布时间】:2018-12-30 13:07:47
【问题描述】:

我有一个带有一些文本和百分比值的 div(例如它是 78%) 我想将百分比可视化为带有原始文本的 div 的背景颜色。它必须填充原始 div 的所有空间,而不是 div 中的一行

<div class="my-div">
    <div class="???" style="width: 78%"></div>
    My text
</div>

【问题讨论】:

    标签: html css bootstrap-4 progress-bar


    【解决方案1】:

    我找到了这个解决方案:

    <div class="progressbar-wrapper">
        Some text
        <div class="progressbar" style="width: 78%"></div>
    </div>
    
    .progressbar-wrapper {
        position: relative;
        z-index: 1;
    }
    
    .progressbar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background-color: #dcf3dd;
        z-index: -1;
    }
    

    【讨论】:

      【解决方案2】:
      <!DOCTYPE html>
      <html>
      <head>
      <title>Page Title</title>
      </head>
      <body>
      
      
       <div style="height:20px; ">
              My text
      </div>
      <div style="height:50px;width:500px;background-color:grey;">
          <div class="???" style="width: 78%;background-color: brown;height: inherit;">this is a progress bar</div>
      </div>
      
      
      </body>
      </html>
      

      【讨论】:

      • “我的文字”必须在主 div 和进度条上方。现在它在下面。
      猜你喜欢
      • 2021-05-04
      • 1970-01-01
      • 2023-03-03
      • 1970-01-01
      • 1970-01-01
      • 2015-04-21
      • 2015-01-04
      • 1970-01-01
      • 2012-08-14
      相关资源
      最近更新 更多