|
目录
1.精灵图的用途
2. 精灵图（sprites）的使用
2.1 原理
2.2 总结
3. 案例：用精灵图拼出名字
3.1 效果图
3.2 代码
1.精灵图的用途
为了有效地减少服务器接收和请求的次数，提高网页的加载速度，因此产生了CSS精灵技术（也称CSS Sprites、CSS雪碧）
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只要一次请求就可以了
2. 精灵图（sprites）的使用
2.1 原理
使用精灵图核心：
精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中这个大图片也称sprites精灵图或者雪碧图移动背景图位置，此时可以background-position移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同一般情况下往上往左移动，所以数值都是负值使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
2.2 总结
精灵图主要是针对于小的背景图片的使用主要借助背景位置来实现---background-position精灵图的数值大多数是负值（左负，右正，上负，下正）
精灵图的缺点：
图片文件比较大图片本身放大和缩小会失真一旦图片制作完就很难更换
3. 案例：用精灵图拼出名字
3.1 效果图
3.2 代码
用精灵图拼出名字
span {
display: inline-block;
margin: 100px auto;
margin-right: 20px;
}
.l {
width: 105px;
height: 120px;
background: url(images/abcd.jpg) no-repeat 0px -270px;
}
.i {
width: 62px;
height: 117px;
/* margin: 100px 120px; */
background: url(images/abcd.jpg) no-repeat -325px -135px;
}
.s {
width: 122px;
height: 118px;
/* margin: 100px 140px; */
background: url(images/abcd.jpg) no-repeat -247px -415px;
}
.a {
width: 112px;
height: 118px;
/* margin: 100px 160px; */
background: url(images/abcd.jpg) no-repeat 0px 0px;
}
26字母图如下
|