bootstrap 进度条背景色

Question

我正在使用 bootstrap 进度条作为健康条。所以我使用 class progress-bar-success 使健康状态变为绿色，但是当进度条下降时我想要红色 "behind" 绿色。当我设置 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

使用进度class的容器来控制绿色后面的bg颜色。 Fiddle: http://jsfiddle.net/rg7src44/2/

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

然后使用客户端脚本添加 class div 进度为 class 的容器以使其进度为红色：

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

bootstrap 进度条背景色

bootstrap progress bar background color

html

twitter-bootstrap