一、原理
1.多个图标组合成一张图片构成雪碧图，通过对不同部位的提取，实现不同效果显示
如下图（图1）：
2.雪碧图优点：加载一张图片在来对一张图片操作，相比于加载多张图片来说，占用资源更少，效率更快。
3.原理
（1）上图片左上角坐标为（0px 0px）,使用笛卡尔坐标系；
（2）上图有10个图标，上下两行两两对应；
（3）用一个与图标宽高相等的盒子来装一个图标，把图片设为盒子背景图片时整张图片都会显示在盒子里，这时要把图片大小放大500%；
（4）当鼠标移到盒子上时，移动图片，显示光亮图标。把图标上下图标为一组，分为5组；
第1组，坐标变化（0px 0px）- ->(0px -100px)
第2组，坐标变化（-100px 0px) - ->(-100px -100px)其余一次类推。
（5）盒子平铺会出现间隙，是因为两个div之间有换行符，可通过两种方法解决：
1.删掉换行符，div放在一行，但是影响代码可读性，美观性；
2.把这些盒子嵌套在一个大盒子中，大盒子字体设为无，不过要注意大盒子的宽度要与图标宽度总和+小盒子边框相等，大盒子宽度不够其他盒子会卡到下一行，大盒子宽度过大，会出现多余部分。
二、代码实现
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid black;
background-image: url(img/share_icon.png);
/*禁止平铺*/
background-repeat: no-repeat;
/*以容器宽高为基准比例，放大图片*/
background-size: 500%;
/*行内块元素 处于同一行内的块元素
边距增加的原因是两个div之间有一个换行符，占系统资源
解决行内块元素的缝隙办法：
1.挪到同一行
2.font-size:0px
* */
/*块元素平铺*/
display: inline-block;
/*解决空隙问题*/
font-size:0px
}
.box0:hover{
background-position: 0 -100px;
}
.box01 {
background-position: -100px -0px;
}
.box01:hover{
background-position: -100px -100px;
}
.box02 {
background-position: -200px -0px;
}
.box02:hover{
background-position: -200px -100px;
}
.box03 {
background-position: -300px -0px;
}
.box03:hover{
background-position: -300px -100px;
}
.box04 {
background-position: -400px -0px;
}
.box04:hover{
background-position: -400px -100px;
}
.div{
width: 510px;
height: 100px;
}
</style>
</head>
<body>
<div class="div">
<div class="box0"></div>
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
<div class="box04"></div>
</div>
</body>
</html>
三、文件搭建和图片
1.建一个名为：img 文件，把图1放进去，并把图1重命名为：share_icon.png
2.建一个html文件，放在img文件的同级目录
最后，如果本文对你有用，欢迎点赞。
1597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
