一、什么是雪碧图
我们可以将多个小图片统一保存到一个大图片中，然后通过调整 background-position 来显示图片，这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题。这个技术在网页中应用十分广泛，被称为 CSS-Sprite。这种图我们称为雪碧图。
二、雪碧图的使用步骤
- 先测量要使用的元素
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置一个偏移量显示正确的图片
<!DOCTYPE html>
<html>
<head>
<title>雪碧图</title>
<meta charset="UTF-8">
<style>
a:link{
display: block;
width: 80px;
height: 80px;
background-image: url("./image/雪碧图.png");
background-position: -10px -39px;
}
a:hover{
display: block;
width: 80px;
height: 80px;
background-image: url("./image/雪碧图.png");
background-position: -101px -39px;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
三、雪碧图的特点
一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验；
标签：雪碧图,19,image,80px,background,position,图片 From： https://www.cnblogs.com/nanoha/p/17006242.html