[1]精灵图(sprites,雪碧图)的优点
- 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送 请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
- 而精灵图的核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了;
- 精灵图有效地减少服务器接收和发送请求的次数,提高页面的加载速度
[2]精灵图的使用
- 精灵图主要是针对于 背景图片(背景图片不经常更换)使用,将多个小的背景图片整合到一张大图片中;
- 在我们使用背景图片时,需要使用background-position属性 将位置定位到所需的小背景图片上;
- 一般是向上左移动 ,所以值一般为负值;
- 使用精灵图需要精确测量,所以需要借助工具,eg:Mark Man
[3]举例说明
----在此张图片中,选择自己需要的字母
----代码---background-position的x,y值需要借助工具 Mark Man
<style>
span {
display: inline-block;
/* 背景图片不会撑大盒子 */
background: url('./images/abcd.jpg');
width: 97px;
height: 113px;
}
.l {
background-position: -6px -275px;
}
.j{
background-position: -389px -142px;
}
.c{
background-position: -235px -5px;
}
</style>
</head>
<body>
<span class="l"></span>
<span class="j"></span>
<span class="c"></span>
</body>