CSS学习，6--背景属性

background 版本：CSS1　 兼容性：IE4+ NS4+　继承性：无

语法：

background : background-color || background-image || background-repeat || background-attachment || background-position

参数：

该属性是复合属性。

说明：

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

默认值为：transparent none repeat scroll 0% 0%。

尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。

示例：

1 div { background: red no-repeat scroll 5% 60%; }

2 body { background: url("images/aardvark.gif") repeat-y; }

3 pre { background: url("images/aardvark.gif") top; }

4 caption { background: fuchsia; }

background-attachment 版本：CSS1　 兼容性：IE4+ NS6+　继承性：无

语法：

background-attachment : scroll | fixed

参数：

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

说明：

设置或检索背景图像是随对象内容滚动还是固定的。

示例：

1 html { background-image: url("anasazi.tif"); background-attachment: fixed; }

background-color 版本：CSS1　 兼容性：IE4+ NS4+　继承性：无

语法：

background-color : transparent | color

参数：

transparent : 　背景色透明

color : 　指定颜色。

说明：

设置或检索对象的背景颜色。

示例：

1 p { background-color: silver }

2 div { background-color: rgb(223,71,177) }

3 body { background-color: #98AB6F }

4 pre { background-color: transparent; }

background-image 版本：CSS1　 兼容性：IE4+ NS4+　继承性：无

语法：

background-image : none | url (url)

参数：

none : 　无背景图

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

说明：

设置或检索对象的背景图像。

示例：

1 code { background-image: url("comet.jpg"); }

2 blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); }

3 br { background-image: url(http://Fred.com/ImageFile/Q.gif); }

4 body { background-image: none; }

background-position 版本：CSS1　 兼容性：IE4+ NS6+　继承性：无

语法：

background-position : length || length

background-position : position || position

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。

position : 　top | center | bottom | left | center | right

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

该属性定位不受对象的补丁属性(padding)设置影响。

示例：

1 div { background: url("images/aardvark.gif"); background-position: 35% 80%; }

2 menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }

3 a { background: url("images/aardvark.gif"); background-position: 3.25in; }

4 body { background: url("images/aardvark.gif"); background-position: top right; }

background-positionX 版本：IE5.5+专有属性　继承性：无

语法：

background-positionX : length | left | center | right

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

left : 　居左

center : 　居中

right : 　居右

说明：

设置或检索对象的背景图像横坐标位置。必须先指定background-image属性。默认值为：0%。

该属性定位不受对象的补丁属性(padding)设置影响。

示例：

1 p { background-image: url("images/aardvark.gif"); background-positionX: 35%; background-repeat:no-repeat; }

background-positionY 版本：IE5.5+专有属性　继承性：无

语法：

background-positionY : length | top | center | bottom

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

top : 　居顶

center : 　居中

bottom : 　居底

说明：

设置或检索对象的背景图像纵坐标位置。必须先指定background-image属性。默认值为：0%。

该属性定位不受对象的补丁属性(padding)设置影响。

示例：

1 p { background-image: url("images/aardvark.gif"); background-positionY: 35%; background-repeat:no-repeat; }

background-repeat 版本：CSS1　 兼容性：IE4+ NS4+　继承性：无

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

repeat : 　背景图像在纵向和横向上平铺

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

说明：

设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。

示例：

1 menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; }

2 p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

layer-background-color 版本：NS4+专有属性　继承性：无

语法：

layer-background-color : transparent | color

参数：

transparent : 　背景色透明

color : 　指定颜色。

说明：

设置或检索对象整个区域的背景颜色。

示例：

1 div { layer-background-color: transparent; }

layer-background-image 版本：NS4+专有属性　继承性：无

语法：

layer-background-image : none | url (url)

参数：

none : 　无背景图

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

说明：

设置或检索对象整个区域的背景图像。

示例：

1 code { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url("comet.jpg"); layer-background-image: url("bb_comet.jpg"); }