CSSSprites介绍
Csssprites可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪碧的意思。在国内习惯成他为图片整合技术,说起来这个称呼也是满贴切的,因为他确实是多张图片整合为一整图片的技术,为什么要把多张图整合到一张上呢,这样做有什么好处呢?因为这样的话,当您访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSSSprites原理
Csssprites是将多张零散的背景图片整合到一张背景图上,然后通过background-position来调整背景的位置,这个时候你必须确保使用该张精灵图的容器要比背景图片小才是OK的,不然很容易漏出其他的背景图片,所以尤其要控制好盒子的大小;其次,你还需要注意书写背景定位的时候极大多数都是负的,水平为负数,图片才会往左侧平移,所以才会显示出你需要的那部分背景图,垂直方向也是同理。当多个盒子引用一张背景图时,只需要改变背景定位就可以改变页面中的显示部分为哪一部分背景图,这样做的目的就是为了降低浏览器向服务器的请求次数,这样一来可以大大提高网页的加载速度。
CSSSprites优缺点
CSSSprites的优点:
1、利用CSSSprites能够减少浏览器向服务器的请求次数,减少