1. 什么是CSS精灵技术
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然后通过定位到不同位置而得到我们需要的某个小图.
使用CSS精灵,需要使用CSS的:
- background-image
- background-repeat
- background-position属性进行背景定位，
- 其中最关键的是使用background-position 属性精确地定位。
2. 为什么需要精灵技术
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。 所以为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。 出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
3. 精灵技术的使用
-
首先我们用一张精灵图(可以去京东或者淘宝网页上获取).这里我用京东网页的精灵图示例.
-
比如说我们想将"多"字图标放置在我们需要他显示的地方,如下:
-
为了效果明显,这里先给一个粉色的大盒子"mod_service",然后将"多"字图标显示到盒子"mod_service_zheng"里面.那么就要将"多"字图标当作盒子"mod_service_zheng"的背景,然后对小图标进行定位.
-
这里定位我们要借助另一个工具,我是用的是ps(可以使用FW,更加方便一点),将精灵图导入ps中,选择切片工具,将我们所需的图标用切片工具选中,然后点击窗口–>信息,就会出现一个小面板,最后将鼠标放在所选中切片区域的最左上角,我们就可以在面板上看见位置的X轴和Y轴的值了.
-
最后要注意的就是,X=0,Y=192,但我们在实际定位使用的时候X和Y的值分别是0和-192,这是因为在精灵图中,我们会默认最左上角那个点是原点,所以在使用时,对于精灵图上的小图定位为我们取的都是负值.
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.mod_service {
height: 79px;
background: pink;
border-bottom: 1px solid #ccc;
}
.mod_service_zheng {
width: 41px;
height: 43px;
background: url(img/icons.png) no-repeat 0 -192px;
}
</style>
</head>
<body>
<div class="mod_service">
<div class="mod_service_zheng"></div>
</div>
</body>
</html>
精灵技术使用总结
**首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
- 精确测量，每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时， 背景定位基本都是 负值。
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
