图片进度条的实现

最新推荐文章于 2024-10-16 15:06:55 发布

原创最新推荐文章于 2024-10-16 15:06:55 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

html/css/js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用CSS的position:absolute属性结合两张不同颜色的图片来实现一个动态的图片进度条效果，并展示了如何让进度条上出现重复图片的方法。

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

总的思路就是利用 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>

效果如下：