Question

我已将以下内容用作“进度”类型栏：

<div style="margin: auto; 
            border-radius: 5px; 
            text-align: center; 
            width: 10%; 
            text-align: left; 
            margin: 2px auto; 
            font-size: 0px; 
            line-height: 0px; 
            background: #C7C7C7; ">  
       <div style="border-radius: 5px; 
                   line-height: 0px; 
                   height: 20px; 
                   min-width: 20%; 
                   max-width: 20%; 
                   width: 20%; 
                   background: #62BF2C; "><!---->
       </div>
</div>

是否有任何方法只使用HTML来允许背景颜色根据％变化 - 即如果小于50％，如果51％-80％是不同颜色则为一种颜色，如果超过此第三种颜色？

Answer 1

尝试使用css calc（）函数更改图像的背景位置（设置为进度条容器的背景图像），使用不同的颜色部分来模拟条形图正在改变颜色。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

这是针对您的案例的可能的HTML + jQuery解决方案：

HTML：

<div class="outer-meter">
    <div class="inner-meter"></div>
</div>

CSS：

.outer-meter {
    margin: auto;
    border-radius: 5px;
    text-align: center;
    width: 10%;
    text-align: left;
    margin: 2px auto;
    font-size: 0px;
    line-height: 0px;
    background: #C7C7C7;
}
.inner-meter {
    border-radius: 5px;
    line-height: 0px;
    height: 20px;
    width: 56%;
}

的jQuery / JavaScript的：

var meter = $('.inner-meter');
var percent = 100 * meter.width() / $('.outer-meter').width();

if (percent < 50)
{
     meter.css('background-color', 'green');
}
else if (percent > 51 && percent <= 80)
{
     meter.css('background-color', 'orange');    
}
else
{
     meter.css('background-color', 'red');
}

演示JSFiddle： http://jsfiddle.net/v3h3nbny/1/

Answer 3

HTML只是静态的。

为此，您需要使用javascript / jquery和css。

Answer 4

您也可以使用 PACE 或 NProgress ，因为它们已经编程，并且应该更容易配置。

PACE 还支持主题，因此您可以对其进行更多自定义！

HTML进度样式栏 - 如何更改背景颜色

4 个答案: