1. 雪碧图的使用场景
(1). 静态图片。不随用户信息的变化而变化
(2). 小图片。图片容量比較小
(3). 载入量比較大
一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图。
2. 使用雪碧图能够降低http请求数量,加速内容显示。每请求一次,就会和server链接一次,建立链接时须要额外时间的。
3. 实现原理
使用background-position属性:
须要使用雪碧图的时候,设置x和y的值就能够了。
4. 实现方式:
一种方式是使用PS手动拼图;
还有一种方式是使用sprite工具自己主动生成一个大图,并返回了每个小图的坐标点,软件:CssGaga。
5. 使用方式:
在我们须要加入雪碧图的地方使用<i>标签(icon)。然后在样式中加入:
i {
background:url(sp.pgn);
background-position:0 -10px;
float:left;
display:inline;
width:30px;
height:24px;
}
通过改变background-position中x和y的值来替换小图,注意x和y值都是小于等于0的值。