用途:
防止图像过多时,向服务器频繁地请求图片,使服务器压力过大,降低页面的加载速度。
通过精灵图,将小图片集合在一张图中,减少请求的次数,提高页面的加载速度。
使用:
精灵图(Sprite)主要用于不常更换的背景图
使用background-position:移动x,y 横纵坐标
精灵图坐标一般是负值(将图片往上往左移动)
示例代码:
图片向左移动180px,纵向不动
根据CSS层叠性,其他地方的图片显示只需要更改背景图片位置
.bg {/*注意坐标为负值*/background: url(../static/bgd.jpg) no-repeat -180px 0px;
}.bg1 {/*注意坐标为负值*/background-position:-10px 0px;
}.bg2 {/*注意坐标为负值*/background-position:-80px 0px;
}