该属性用来设置元素的背景,它是个复合属性,它可以设置背景的图像、图像位置、图像尺寸、图像的铺排方式、图像随元素滚动的方式、图像显示的原点、图像向外裁剪的区域和背景颜色。
一个元素可以设置多重背景图像,但是只能设置一次背景色。
设置多重背景时,前面的背景图像会覆盖后面的背景图像(即重叠),所以一般为了背景色把背景图像覆盖了,都把背景色设置在最后一组背景上,每组属性之间用逗号隔开。
该属性用来定义元素的背景色。元素的背景图像会覆盖在背景色上。
它的默认取值为transparent,除此之外还可以取值为颜色名称或十六进制码及rgba等。
该属性用来定义元素的背景图像。
它的默认取值为none,即不设置背景图像。其他取值为带绝对地址或相对地址的url,或者创建渐变色来作为背景图像。
当设置多重背景时,前面的图像会盖掉后面的图像。
该属性用来定义元素图像在元素上的铺排方式。其取值如下:
如果提供两个参数,则第一个参数用于横向,第二个参数用于纵向。如果只提供一个参数,则用于横向和纵向,除了repeat-x和repeat-y。默认取值为repeat。
该属性用来设置背景图像随元素内容的滚动方式。
它的默认取值为scroll,即图像相对于元素固定。除此之外,还可以取值为fixed(图像相对于窗体固定)或local(图像相对于元素内容固定)。
fixed示例请看左边的小人(你走),scroll示例请看中间的小人(我不走),local示例请看最右边的小人(你走不走)。
该属性用来设置背景图像在元素中的位置。
它的默认取值为0% 0%,取值可以为百分比,也可以为长度值,或者为如下的关键字:
可以提供1个参数或2个参数值或者4个参数值,当为4个参数值时,偏移量前必须带有关键字,如“left 20px bottom 20px”;当为两个参数时,第一个用于横向,第二个用于纵向;当为一个参数时,用于横向,纵向默认取50%。
该属性用来设置计算背景图像位置时所需要的参考原点。
它的取值如下所示,默认值为padding-box。
该属性用于设置背景图像向外裁剪的区域。
它的取值如下所示,默认取值为border-box。
该属性用来设置背景图像的尺寸大小。
它的默认取值为auto,即图像的真实大小。除此之外,还可以取值为长度值或者百分比,均不允许负值,还可以取值为cover(图像等比缩放到完全覆盖容器,图像可能超出元素)或者contain(图像等比缩放到宽度或者高度与元素的宽度或高度相等,使图像始终被包含在元素内)。
当该属性取百分比时,百分比的参照和我们平时认知上的参照有一些出入,它不是根据元素的宽度或者高度进行参照来计算背景图像原点的所在,而是让图像上百分比位置的点与元素百分比位置的点进行重合,从而找到背景图像的位置。
在很多网站的页面都会用到很多图标,如果把所有图标都集合在同一张图片上,对于应用不同图标的元素应用背景图像的不同位置(但是背景图还是同一张),则可以省去请求很多次图片的麻烦。