-
- background-image
- backgorund-position
- 特点:
- 相对于当个小图标,它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利用好它可以有效的提高网页的加载速度。
- 一般情况下,你需要保存为PNG-24的文件格式。
- 可以设计出丰富多彩的颜色体表。
- 你需预先确定每个小图标的大小
- 注意小图标与小图标之间的距离
- 细心、耐心
background-position 索引值
<ul class="sprite"> <li id="1"> <s style="background-position: 0 0;" class="s-icon"></s> <a href="index.html?cat=1">顺丰速运1</a> </li> <li id="2"> <s style="background-position: 0 -40px;" class="s-icon"></s> <a href="index.html?cat=2">顺丰速运2</a> </li> <li id="3"> <s style="background-position: 0 -80px;" class="s-icon"></s> <a href="index.html?cat=3">顺丰速运3</a> </li> <li> <s class="s-icon"></s> <a href="">顺丰速运4</a> </li> <li> <s class="s-icon"></s> <a href="">顺丰速运5</a> </li> <li> <s class="s-icon"></s> <a href="">顺丰速运6</a> </li> <li> <s class="s-icon"></s> <a href="">顺丰速运7</a> </li> <li> <s class="s-icon"></s> <a href="">顺丰速运8</a> </li> <li> <s class="s-icon"></s> <a href="">顺丰速运9</a>