CSS3 background 属性详解

CSS3中对background属性做了一些修改，本文将对这些修改做进一步的说明。

多背景图片

css3之前的background只能设置一张背景图片，本次css3将background的背景图片修改成可以使用多图片当背景.

1
background-image:url('left.jpg'),url('right.jpg'),url('right.jpg')

background-image有几种可能的取值，默认值是none。

取值：

  • none:无背景图

  • url:使用绝对或相对地址指定背景图像

  • linear-gradient:使用线性渐变创建背景图像(CSS3新增)

  • radial-gradient:使用径向(放射性)渐变创建背景图片(CSS3新增)

  • repeating-linear-gradient:使用重复的线性渐变创建背景图片(CSS3新增)

  • repeating-radial-gradient:使用重复的径向(放射性)渐变创建背景图片(CSS3新增)

background-origin

这个origin属性需要结合background-position一起使用，默认情况下，background-position是指背景图片铺开时是从content区域的左上角开始，而这个background-origin就规定了background-position从border、padding、content中的哪个开始。

取值：

  • padding:背景图像相对于内边距框来定位，默认值也是padding.

  • border:背景图像相对于边框盒来定位

  • content:背景图片相对于内容框来定位

注意 : 如果设置了background-attached:fixed，则background-origin属性无效。

background-clip

此属性规定背景的裁剪区域，默认值也是有padding、border、content-box.
不同于background-origin,background-clip的默认值为border,也就是背景默认从边框盒开始裁剪。

background-clip和background-origin的区别：

前者是规定背景从哪个地方开始裁剪，后者是规定背景从哪里开始绘制，也就是背景绘制时的参照点，因为background-position属性的值经常会是10px 20px这种，这里的10px,20px就必然会需要一个参照物，添加背景时先根据background-origin规定的区域做为参照物绘制，绘制完毕后根据background-clip的值来相应的裁剪。

background-size

此属性规定背景图片的大小，可能取值为：

  • length:设置背景图像的宽度和高度，第一个值为宽度，第二个值为高度，如果第二个不填，默认为auto

  • percentage:以父元素百分比来设置背景图像的宽度和高度，第一个为宽度，第二个为高度，如果第二个不填，默认值为auto

  • cover:把背景图像扩展至足够大，以使背景图片完全覆盖背景区域，**

    背景图像的某些部分可能无法显示在背景定位区域中，因为图像被放大了。**

  • contain:把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域。背景图片扩展至最大尺寸后，如仍未完全适应内容区域的话，多出的部分会留白。

Multiple backgrounds

可以将background的各个子属性集中写在background中，默认的顺序为：

background: background-image background-origin background-clip background-repeat background-size background-position

多重背景图像时，用逗号,隔开，例子如下：

1
background:url(image/multiple-backgrounds.png) left top no-repeat,url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;