背景图片基础:
使用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.将多个图片整合为一-张图片,减小了图片的总大小,提高请求的速度,增加了用户体验