Question

我使用bootstrap进度条作为健康栏。所以我使用class progress-bar-success来使健康变为绿色，但是当进度条出现故障时，我希望红色＆＃34;背后＆＃34;绿色的。当我设置css background-color时，它将整个进度条变为红色。关于如何做到这一点的任何想法？

这是我到目前为止所做的：

<div class="progress">
   <div id="divPlayerHealthBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
   <div id="divPlayerHealth" class="overlay_health" style="text-align: center; font-weight: bold;">@Model.Player.Health / @Model.Player.Health</div>
</div>

Answer 1

使用进度类的容器来控制绿色背后的bg颜色。小提琴：http://jsfiddle.net/rg7src44/2/

.progress-red {
    background-color: red;
}

然后使用客户端脚本添加具有类进度的类div容器：

<div class="progress progress-red">
    ...
</div>

bootstrap进度栏背景颜色

1 个答案: