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;

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。