什么是精灵图
css精灵(CSS sprites),又称雪碧图,是一种网页图片应用处理技术。
精灵技术主要针对于背景图片使用,把多个小背景图片整合到一张大图片中,这个大图片也称为 sprites 精灵图 或者 雪碧图,借助于背景位置来实现—background-position,移动的距离就是这个目标图片的 x 和 y 坐标。
为什么要使用精灵图(作用)
一个网页中往往会应用很小的背景图作为修饰,当网页上的图像过多时,服务器就会频繁的接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的速度。因此为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了css精灵技术(也称csssprites、css雪碧)
精灵图的优点
- 减少网页的http请求,从而加快了网页加载速度,提高用户体验。
- 减少图片的体积,因为每个图片都有一个头部信息,把多个图片放到一个图片里,就会共用同一个头信息,从而减少了字节数。
- 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名。
- 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。
精灵图的优点
- 在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂。
- CSS Sprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
- 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片。
- 精灵图不能随意改变大小和颜色。改变大小会失真模糊,降低用户体验,Css3新属性可以改变精灵图颜色,但是比较麻烦,并且新属性有兼容问题,现在一般用字体图标代替精灵图。
实现原理
利用CSS的"background-image",“background-repeat”,"background-position"的组合进行背景定位,background-position可以用数字精确地定位出背景图片的位置。
实例
<ul>
<li class="sprites1"></li>
<li class="sprites2"></li>
<li class="sprites3"></li>
<li class="sprites4"></li>
</ul>
ul li {
list-style: none; /* 清除ul默认样式 */
margin: 50px;
float: left;
width: 16px;
height: 16px;
background-color: #ccc;
background-image: url(./un_icon_index_type20170111.png);
}
.sprites1 {
background-position: 0 0; }
.sprites2 {
background-position: -26px -26px; }
.sprites3 {
background-position: 0 -26px; }
.sprites4 {
background-position: -24px -79px; }