css3背景、边框、和补丁相关属性 （二）

背景

background : background-color || background-image || background-repeat || background-attachment || background-position 默认值为：transparent none repeat scroll 0% 0%。

设置对象的背景样式。如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如：

设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性，则其设置将被 background-image 的默认值 none 覆盖。背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。对应的脚本特性为 background 。

相关属性：

background-attachment : scroll | fixed 语法取值

scroll  :　 默认值。背景图像是随对象内容滚动

fixed   :　 背景图像固定

background-color : transparent | color 语法取值 transparent  :　 默认值。背景色透明

color        :　 指定颜色。请参阅 颜色单位 和 附录：颜色表  使用说明 设置或检索对象的背景颜色。当背景颜色与背景图像( background-image )都被设定了时，背景图片将覆盖于背景颜色之上。

background-image : none | url ( url ) 语法取值 none         :　 默认值。无背景图 url ( url )  :　 使用绝对或相对 url 地址指定背景图像 使用说明 设置或检索对象的背景图像。当背景图像与背景颜色( background-color )都被设定了时，背景图片将覆盖于背景颜色之上。

background-position : length || length background-position : position || position 语法取值 length    :　 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  :　 top | center | bottom | left | center | right 使用说明 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。对应的脚本特性为 backgroundPosition 。

background-position-x : length | left | center | right 语法取值 length  :　 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  left    :　 居左 center  :　 居中 right   :　 居右 使用说明 设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 backgroundPositionX 。

background-position-y : length | top | center | bottom 语法取值 length  :　 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  top     :　 居顶 center  :　 居中 bottom  :　 居底  使用说明 设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 backgroundPositionY 。

background-repeat : repeat | no-repeat | repeat-x | repeat-y 语法取值 repeat     :　 默认值。背景图像在纵向和横向上平铺 no-repeat  :　 背景图像不平铺 repeat-x   :　 背景图像仅在横向上平铺 repeat-y   :　 背景图像仅在纵向上平铺 使用说明 设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。

layer-background-color : transparent | color 语法取值 transparent  :　 默认值。背景色透明。 color        :　 指定颜色。请参阅 颜色单位 和 附录：颜色表。 使用说明 设置或检索对象整个区域的背景颜色。 CSS3新增： background-origin ： border | padding | content 相关属性： background-clip | background-size 取值：border： 从border区域开始显示背景。 padding： 从padding区域开始显示背景。 content： 从content区域开始显示背景。

background-clip ： border-box | padding-box | content-box | no-clip 相关属性： background-origin | background-size 取值：border-box： 从border区域向外裁剪背景。 padding-box： 从padding区域向外裁剪背景。 content-box： 从content区域向外裁剪背景。 no-clip： 从border区域向外裁剪背景。

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

相关属性： background-clip | background-origin

取值：

<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

<percentage>： 取值为0%到100%之间的值。不可为负值。 说明：设置背景图片的大小。

指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

Multiple backgrounds

语法：background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

相关属性： background-image | background-origin | background-clip | background-repeat | background-size | background-position

取值：<background-image>： 指定或检索对象的背景图像。

<background-origin>： 指定背景的显示区域。参见background-origin

<background-clip>： 指定背景的裁剪区域。参见background-clip

<background-repeat>： 设置或检索对象的背景图像是否及如何重复铺排。

<background-size>： 指定背景图片的大小。参见background-size

<background-position>： 设置或检索对象的背景图像位置。 说明：多重背景图象，可以把不同背景图象只放到一个块元素里。 多个图片url之间使用逗号隔开即可；如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。 CSS3中在容器的多层背景，各子属性与逗号来分隔值，如果指定的值，如下：

background-image: w1, w2, w3,…, wM background-repeat: x1, x2, x3,…, xR background-size: y1, y2, y3,…, yS background-position: s1, s2, s3,…, sP 当背景层的数值是N = max(M,R, S, P) 每个属性可以假如它的值为n，通过重复指定的值如下所示：

background-image: w1,…wM, w1,…wM, w1,… /* N values */ background-repeat: x1,…xR, x1,…xR, x1,… /* N values */ background-size: y1,…yS, y1,…yS, y1,… /* N values */ background-position: s1,…rP, s1,…rP, s1,… /* N values */

范例书写：

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

也可以简写：

background: url(img/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;