精灵图
为什么需要精灵图?
图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图作为装饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这大大减低页面的加载速度。
因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称为CSS Sprites 、CSS雪碧)。
CSS精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,想要精确定位到精灵图中的某个小图。
核心原理:将网页中的一些小背景图像整合到一张大图中,当用户访问页面时,只需要向服务器发送一次请求,网页中的背景图像即可全部展示出来。
使用精灵图核心:
- 精灵技术主要针对于背景图片使用。就是把多个小图片整合到一张大图片中。
- 这个图片也称为sprites 精灵图 或者雪碧图。
- 移动背景图位置,此时可以使用background的position。
- 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同, 因为一般情况下都是往上往左移动,所以数值是负值。
- 使用精灵图的时候,需要精确测量,每个小背景图片的大小和位置。
案例:
<head>
<style>
.icon1 {
width: 23px;
height: 23px;
/*background的复合写法:背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置*/
/*url(images/sprites.png 背景图片地址,no-repeat 背景不平铺,0 -107px 背景图片位置) */
background: url(images/sprites.png) no-repeat 0 -107px;
}
.icon2 {
width: 23px;
height: 23px;
background: url(images/sprites.png) no-repeat -157px -107px;
margin: 100px;
}
</style>
</head>
<body>
<div class="icon1"></div>
<div class="icon2"></div>
</body>
使用精灵图核心总结:
- 精灵图主要针对于小的背景图片的使用,精确测量每个小背景图片的大小和位置。
- 主要借助于背景位置来实现—background-position。
- 一般情况下精灵图都是负值。(千万要注意网页中的坐标:(x轴右边走是正值,左边走是负值,y轴同理。)
制作精灵图
CSS精灵图其实网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图
大部分情况下,精灵图都是网页美工做
- 精灵图上放的都是小的装饰性质的背景图,插入图片不能往上放。
- 精灵图的宽度取决于最宽的那个背景。
- 我们可以横向摆放也可以纵向摆放,但是每个图片之间,间隔至少隔开偶数像素合适。
- 精灵图的最低端,留一片空白,方便我们以后添加其他精灵图。
背景图片很少的情况,没有必要使用精灵技术,维护成本太高,如果背景图片比较多,可以建议使用。