CSS-Sprite （解决HTML图片闪烁问题）
1. 描述
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载，用则加载，不用则不会加载。如果我们使用所需要的图片刚好需要加载时，浏览器向会发送一个请求，这时背景图片就会出现一个短暂的空白，然后再将图片加载后，放在空白那里，如下列代码。
2. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按钮练习</title><style>a{display: block;width: 93px;height: 29px;}a:link{background-image: url('../08/link.png');}a:hover{background-image: url('../08/hover.png');}a:active{background-image: url('../08/active.png');}</style>
</head>
<body><a href="#"></a>
</body>
</html>
像上边的练习link会首先加载，而hover和active会在指定状态触发的时候才会加载，这时如果我们是第一次访问这个网页，当我们将鼠标移动到图片上去时，页面图片会出现一个短暂闪烁的问题，下面使用“雪碧图”来解决这个问题。
3. 解决
a:link{background-image: url('../08/btn.png');
}
a:hover{background-image: url('../08/btn.png');background-position: -93px 0px;
}
a:active{background-image: url('../08/btn.png');background-position: -186px 0px;
}
4. 总结
使用雪碧图可以解决图片闪烁的问题：可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示相应的图片。这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题，这个技术在网页中应用的十分广泛，被称为CSS-Sprite，这种图称为“雪碧图”。
雪碧图的使用步骤：
1. 先确定要使用的图标；
2. 测量图标的大小；
3. 根据测量的结果创建一个元素；
4. 将雪碧图设置为元素的背景图片；
5. 设置一个偏移量已显示要显示的图片；
雪碧图特点： 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提示用户的体验。
