325 字2 分钟
使用 z-index 实现图片加载模糊到清晰
访问有些网站的时候，首先显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——大图文件大，加载慢，小图文件小，加载快。如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空。这样做实际上是在大图下载完显示之前，显示的是缩略图。
实现的方法有很多，这里介绍一种方法，使用 css 的 z-index 属性。先去看看效果。
实现起来相当简单，没有 JavaScript。
<div style="width:600px;height:374px;"> <img src="/zb_users/plugin/windsphoto/photofile/20132/2013022729743689.webp" alt="仙剑5-唐雨柔" style="opacity:1;z-index:1;position:absolute;" /> <img src="/zb_users/plugin/windsphoto/photofile/20132/small_2013022729743689.webp" 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