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

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

这是一个fiddle：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 中的进度条？

How do I add an image to a progress bar in HTML/CSS?

html

css

progress