图片精灵技术

---

前言

图片精灵技术的作用就是为了减轻服务器负载，提高哦网页加载速度，将网页需要多个小图片整合成一张大图上，原先需访问多次服务器获取图片，现只获取一张图片即可。

---

一、background-position设置

使用起来也比较简单：
图片：
编写代码：

<style type="text/css">
			.parent{
				border: 1px solid peru;
				width: 80px;
				height: 80px;
				background-image: url(./index.jpg);
				background-position:  -250px 0 ;
			}
		</style>

background-position:如果只设置一个坐标，另一个坐标就默认为center，可以使用left\right\botton\top\center来设置，也可以用数值来设置

<div class="parent"></div>

效果：

总结

图片精灵技术，比较麻烦的点在于要计算各个图标的大小，位置多少才能显示图标，如果坐标偏移了一些的话，那么可能显示不全图标或者图标显示得偏左偏上等问题，需要计算好偏移多少才能更好的展示图标