1.精灵图的用途
为了有效地减少服务器接收和请求的次数,提高网页的加载速度,因此产生了CSS精灵技术(也称CSS Sprites、CSS雪碧)
原理:把网页中的一些背景图片整合到一张图片文件中, 用backgroun-position等属性进行背景定位
2. 精灵图(sprites)的使用
(1)精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中
(2)这个大图片也称sprites精灵图或者雪碧图
(3)移动背景图位置,此时可以background-position移动的距离就是这个目标图片的x和y坐标。
(4)使用精灵图的时候需要精确测量,每个小背景图片的大小和位置
2. 精灵图的优缺点
(1) 优点:
1. 减少http请求, 加快网页的加载速度, 提高用户体验
2.减少图片的体积, 减少字节数
3. 解决设计师图片命名的烦恼
4.更换风格方便
(2) 缺点:
1. 开发时需要测量, 比较繁琐
2. 维护的时候麻烦
3. 精灵图不能随意改变大小和位置
4. 宽屏高分辨率的屏幕下, 容易出现背景断裂
3. 演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 100px;
display: flex;
background-color: white;
justify-content: space-around;
margin: 0 auto;
}
span {
display: flex;
flex-direction: column;
margin-left: 8px;
}
a{
margin-top: 8px;
width: 64px;
height: 64px;
}
span:nth-child(1) a{
background-image: url(./images/localnav_bg.png);
}
span:nth-child(2) a{
background-image: url(./images/localnav_bg.png);
background-position: 0 64px;
}
span:nth-child(3) a{
background-image: url(./images/localnav_bg.png);
background-position: 0 128px;
}
span:nth-child(4) a{
background-image: url(./images/localnav_bg.png);
background-position: 0 192px;
}
span:nth-child(5) a {
background-image: url(./images/localnav_bg.png);
background-position: 0 256px;
}
</style>
</head>
<body>
<div>
<span>
<a href="#"></a>
<span style="margin-left: 1px;">景点.玩乐</span>
</span>
<span>
<a href="#"></a>
<span>周边游</span>
</span>
<span>
<a href="#"></a>
<span>美食林</span>
</span>
<span>
<a href="#"></a>
<span>一日游</span>
</span>
<span>
<a href="#"></a>
<span style="margin-left: 1px;">当地攻略</span>
</span>
</div>
</body>
</html>