更改bootstrap进度条的背景图像

Question

我一直在尝试在bootstrap中为我的进度条添加背景图片。这可能吗？我的HTML是：

<div class="progress" style="margin-top:3%;">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%; 
background-image:url(scribble.png);">
<span class="sr-only">70% Complete</span>
</div>
</div>

Answer 1

使用CSS修改 .progress 和 .progressBar 类。

<style>
.progress {
      margin-top: 3%;
      background-color: rgba(32,127,225,.6);
}
.progress-bar {
      width: 70%;
      background-image:url(scribble.png)
}
</style>

避免使用内联样式属性 ，因为它们很难维护代码。