为什么需要精灵图技术？
- 有效的减少服务器接收和发送请求的次数，提高加载效率
精灵图技术核心原理
- 将网页中的小图片整合到一张大图中，这样服务器只需要请求一次。
- 精灵图技术主要针对背景图片
- 移动背景图片的位置可以使用 background-position
- 移动的距离为目标图片的x和坐标，一般为负值。
代码及实例
<style>
.box{
width: 61px;//
height: 59px;//要显示出来的小图片的大小
margin: 100px auto;
background: url(index.png);//背景图片链接
background-position: -182px 0;//图片位置，默认左上角对齐，所以为负值。
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
精灵图和实际效果
1544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
