CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
CSS 雪碧图技术不是什么新东西，在网页应用中已经有几年了，现在的网页开发在图标图片的应用上已经趋向于使用字体图标，这是一种比CSS雪碧图技术更优雅的图标应用方式。
比如：
CSS知识点：
background-imagebackgorund-position
特点：
相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
一般情况下，你需要保存为PNG-24
的文件格式。可以设计出丰富多彩的颜色体表。
<span style="color:#444444;">.toolbar{
right:10px;
bottom:10px;
</span><span style="color:#ff0000;">position:fixed;</span><span style="color:#444444;">
}
.blog{
</span><span style="color:#ff0000;">background-position: 0 -798px;
&:hover{
background-position: 0 -860px;
}</span><span style="color:#444444;">
}
.feedback{
background-position: 0 -426px;
&:hover{
background-position: 0 -488px;
}
}
.app{
background-position: 0 -550px;
&:hover{
background-position: 0 -612px;
}
}
.top{
background-position: 0 -674px;
&:hover{
background-position: 0 -736px;
}
}
.toolbar-item{
</span><span style="color:#ff0000;">display: block;
width: 52px;
height: 52px;
background-image: url(../img/toolbar.png);
background-repeat: no-repeat;</span><span style="color:#444444;">
margin-top: 1px;
}
</span>必须先确定长 宽 背景的整张图片 不重复
display: block;
width: 52px;
height: 52px;
background-image: url(../img/toolbar.png);
background-repeat: no-repeat;利用background-position属性
它有两个参数，分别是水平方向移动的像素、竖直方向移动的像素，都用
负数表示
。大图不动，div移动，也只能是向右、向下移动，只要记住这两个方向移动的像素都用负数表示就行了！
.blog{
background-position: 0 -798px;
&:hover{
background-position: 0 -860px;
}
}至于像素是多少 我用的是PS 放大图片 用标尺+参考线来看像素（将标尺单位改为像素即可）
转载请注明原文地址: https://ju.6miu.com/read-1302474.html
