如何在HTML / CSS的进度栏中添加图像？

姆齐格蒙德

我基本上是想用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>

大卫

这是一个小提琴：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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。