图片进度条的实现

今天实现一下图片进度条，觉得很有意思，故记录下来：

总的思路就是利用 position:absolute 的属性，将两张大小相同，颜色不同的图片重叠起来，通过控制上层图片的宽度显示出当前进度（当然如果有图片重复的需求，可以使用背景图的repeat属性，或者直接做一张重复的图片出来）。

首先，我们需要两张大小相同颜色不同的图片，然后设置dom结构;

<div class="downImg">
      <div class="upImg style="width: 100%"></div>
</div>

然后设置样式：

.downImg{
     width: 700px;
     height: 45px;
     position: relative;
}
.upImg{
          position: absolute;
          bottom: 0;
          height: 100%;
          max-width: 100%;
}

接下来通过控制 upImg 的 宽度即可实现进度条显示。

另外来说说，在只有两张图片的情况下，怎么做才能进度条上有很多张重复图片的效果，像这样：

 我们可以使用背景图重复的样式来做，主要算好图片的宽度和容器的宽度，比如图片width:10px,我们需要十个图片重复，就给容器定个宽度为100px：

.downImg{
        width: 700px;
        height: 45px;
        position: relative;
		background: url(./car-dark.svg) 0 0 repeat-x;
		background-size: contain; 
}
.upImg{
        position: absolute;
        bottom: 0;
        height: 100%;
        max-width: 100%;
		background: url(./car-light.svg) 0 0 repeat-x;
		background-size: contain;
}

 DOM 结构：

<div class="downImg">
     <div class="upImg" style="width: 60%"></div>
</div>

效果如下：