[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>
2390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
