雪碧图
一、图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度
二、雪碧图使用步骤
1:先确定要使用的图标
2:测量图标的大小
3:根据测量结果创建一个元素
4:将雪碧图设置为元素的背景
5：设置一个偏移量以显示正确的图片
可以看作是管中窥豹
演示代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1{
width: 60px;
height: 60px;
background-color: powderblue;
border: 1px solid red;
background-image: url(./homework/亚马逊精灵图.png);
background-position: -20px -578px;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<div class="box1"></div>
</body>
</html>
效果图为：
代码中用到的图：
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
