html - 更改 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>

避免内联样式属性，因为它们会使代码维护变得非常困难。