使用 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