css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置

背景图片基础:

使用background-image来设置背景图片

语法: background-image:url(相对与css的路径)

如果背景图片大于元素，默认会显示图片的左上角

如果背景图片和元素一样大，则会将背景图片全部显示

如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

可以同时为一个元素指定背景颜色和背景图片

这样背景颜色将会作为背景图片的底色

般情况下设置背景图片时都会同时指定一个背景颜色(因为加载外部图片需要一定的时间.再图片加载出来之前.会先显示颜色)

背景图片默认是贴着元素的左，上角显示

缩写:

background(注意 如果没有指定其中的某个属性,则会采用默认值.比如用background只指定了背景图片.没有颜色  那么会使用默认的透明色覆盖掉前面单独设置的颜色)

通过该属性可以同时设置所有背景相关的样式

没有顺序的要求，谁在前谁在后都行,也没有数量的要求

雪碧图按钮例子(css-sprite)

用到的属性:

background-image:url();

background-position:0px 0px;/*坐标*/

通常如果给按钮的三个状态分别设置三张背景图片,在网速较慢的时候,切换状态时会出现闪烁的情况,那是因为

当hover被触发时，浏览器才去加载hover . png

当active被触发时，浏览器才去加载active. png

由于加载图片需要- 定的时间，所以在加载和显示过程会有-段时间，背景图片无法显示，导致出现闪烁的情况

为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了

然后在通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术(css-sprite)也就是常说的雪碧图

原文地址:http://www.qingzhouquanzi.com/107.html

此方法的优点:

1.将多个图片整合为-张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。

2.将多个图片整合为一-张图片，减小了图片的总大小，提高请求的速度，增加了用户体验