Question

我基本上是尝试使用JSFiddle为网站设置HTML和CSS的进度条。我想在条形图上覆盖一个可以随条形移动直到它到达目标的图像，但是我无法弄清楚如何这样做。任何帮助将不胜感激。

CSS：

.box {
    border-radius: 10px;
    padding: 25px;
    background-color: rgba(51, 51, 51, 0.96);
    text-align: center;
}
#progressbar {
    border: 3px solid #fff;
    border-radius: 20px;
    padding: 2px;
}
#progressbar > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    width: 30%;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}
.text {
    color: #fff;
    margin-top: 15px;
    font-size: 21px;
    font-weight: bold;
}

HTML：

<body>

  <h1>Help Mr. Finley get to the finish line!</h1>

  <div class="box">
      <div id="progressbar">
          <div></div>
      </div>
      <div class="text">Marching... 30%</div>
  </div>

</body>

Answer 1

这是一个小提琴：https://jsfiddle.net/u3urw5wy/

添加background-image:url(AddImageUrlHere)以替换background-color: #fff;，如下所示：

#progressbar > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image:url(http://upstreamonline.com.cdn.bitbit.net/incoming/article1250137.ece/alternates/article_main/Cross%20the%20line%20sprint%20finishing%20tape%20runner%20athletics.jpg);
    width: 30%;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

如何将图像添加到HTML / CSS中的进度条？

1 个答案: