使用 z-index 实现图片加载模糊到清晰

访问有些网站的时候,首先显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——大图文件大,加载慢,小图文件小,加载快。如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空。这样做实际上是在大图下载完显示之前,显示的是缩略图。

实现的方法有很多,这里介绍一种方法,使用 css 的 z-index 属性。先去看看效果

实现起来相当简单,没有JavaScript。

<div style="width:600px;height:374px;">
<img src="http://www.windsphoto.com/photofile/20132/2013022729743689.jpg" alt="仙剑5-唐雨柔" style="opacity:1;z-index:1;position:absolute;"/>
<img src="http://www.windsphoto.com/photofile/20132/small_2013022729743689.jpg" alt="仙剑5-唐雨柔" style="width:100%;height:100%;"/>
</div>

注意要把小图的宽和高设置成和大图一样,获取大图的尺寸,设置在div上,小图设置成100%即可。

图片模糊到清晰效果图

来一张效果图

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

关于z-index:http://www.w3school.com.cn/css/pr_pos_z-index.asp