标签： 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%即可。

继续阅读