WEB标准学习路程之"CSS"：3.背景Background属性

 

背景Background属性

属性		CSS Version 版本		Compatibility 兼容性		Inherit From Parent 继承性		Description 简介
background		CSS1		IE4+ , NS4+		无		复合属性。设置或检索对象的背景特性
	background-attachment		CSS1		IE4+ , NS6+		无		设置或检索背景图像是随对象内容滚动还是固定的
	background-color		CSS1		IE4+ , NS4+		无		设置或检索对象的背景颜色
	background-image		CSS1		IE4+ , NS4+		无		设置或检索对象的背景图像
	background-position		CSS1		IE4+ , NS6+		无		设置或检索对象的背景图像位置
	background-positionX		IE专有属性		IE5.5+		无		设置或检索对象的背景图像横坐标位置
	background-positionY		IE专有属性		IE5.5+		无		设置或检索对象的背景图像纵坐标位置
	background-repeat		CSS1		IE4+ , NS4+		无		设置或检索对象的背景图像是否及如何铺排
	layer-background-color		NS专有属性		NS4+		无		设置或检索对象整个区域的背景颜色
	layer-background-image		NS专有属性		NS4+		无		设置或检索对象整个区域的背景图像

background

语法： background : background-color || background-image || background-repeat || background-attachment || background-position

 

参数： 

该属性是复合属性。请参阅各参数对应的属性。

 

说明： 

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

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

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

对应的脚本特性为background。请参阅我编写的其他书目。

 

示例： 

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

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

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

caption { background: fuchsia; }

background-attachment

语法： background-attachment : scroll | fixed

 

参数： 

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

fixed : 　背景图像固定

 

说明： 

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

对应的脚本特性为backgroundAttachment。请参阅我编写的其他书目。

 

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

background-color

语法： background-color : transparent | color

 

参数： 

transparent : 　背景色透明

color : 　指定颜色。请参阅颜色单位和附录：颜色表

 

说明：

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

对应的脚本特性为backgroundColor。请参阅我编写的其他书目。

 

示例： 

p { background-color: silver }

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

body { background-color: #98AB6F }

pre { background-color: transparent; }

background-image

 语法： background-image : none | url (url)

 

参数： 

none : 　无背景图

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

 

说明： 

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

对应的脚本特性为backgroundImage。请参阅我编写的其他书目。

 

示例： 

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

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

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

body { background-image: none; }

 

background-position

语法： 

background-position : length || length

background-position : position || position

 

参数： 

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

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

 

说明： 

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

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

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

对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。

 

示例： 

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

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

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

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

 

background-positionX

语法： background-positionX : length | left | center | right

 

参数： 

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

left : 　居左

center : 　居中

right : 　居右

 

说明： 

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

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

对应的脚本特性为backgroundPositionX。请参阅我编写的其他书目。

 

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

background-positionY

语法： background-positionY : length | top | center | bottom

 

参数： 

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

top : 　居顶

center : 　居中

bottom : 　居底

 

说明： 

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

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

对应的脚本特性为backgroundPositionY。请参阅我编写的其他书目。

 

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

background-repeat

语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y

 

参数： 

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

no-repeat : 　背景图像不平铺

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

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

 

说明： 

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

对应的脚本特性为backgroundRepeat。请参阅我编写的其他书目。

 

示例： 

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

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

layer-background-color

语法： layer-background-color : transparent | color

 

参数： 

transparent : 　背景色透明

color : 　指定颜色。请参阅颜色单位和附录：颜色表

 

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

 

示例： div { layer-background-color: transparent; }

 

layer-background-image

 语法： layer-background-image : none | url (url)

 

参数： 

none : 　无背景图

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

 

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

 

示例： 

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"); }

 

定位Positioning属性

属性		CSS 版本		兼容性		继承性		简介
position		CSS2		IE4+ , NS4+		无		检索对象的定位方式
	z-index		CSS2		IE4+ , NS6+		无		检索或设置对象的层叠顺序
	top		CSS2		IE4+ , NS4+		无		检索或设置对象与其最近一个定位的父对象顶部相关的位置
	right		CSS2		IE5+		无		检索或设置对象与其最近一个定位的父对象右边相关的位置
	bottom		CSS2		IE5+		无		检索或设置对象与其最近一个定位的父对象底边相关的位置
	left		CSS2		IE4+ , NS4+		无		检索或设置对象与其最近一个定位的父对象左边相关的位置

position

语法： position : static | absolute | fixed | relative

 

参数： 

static : 　无特殊定位，对象遵循HTML定位规则

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框

relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

fixed : 　IE5.5及NS6尚不支持此属性

 

说明： 

检索对象的定位方式。

对应的脚本特性为position。请参阅我编写的其他书目。

 

示例： 

div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }

div { position:relative; top:-3px; left:6px; }

 

z-index

语法： z-index : auto | number

 

参数： 

auto : 　遵从其父对象的定位

number : 　无单位的整数值。可为负数

 

说明：

检索或设置对象的层叠顺序。

如两个绝对定位对象的此属性具有同样的值，那么将依据它们在HTML文档中声明的顺序层叠

对应的脚本特性为zIndex。请参阅我编写的其他书目。

 

示例：div { position:absolute; z-index:3; width:6px; }

top

语法： top : auto | length

 

参数： 

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值，或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

 

说明： 

检索或设置对象与其最近一个定位的父对象顶部相关的位置。

对应的脚本特性为top。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posTop，pixelTop，以及对象的offsetTop等特性。请参阅我编写的其他书目。

 

示例： 

div { position: absolute; top: 1in; }

div { position:relative; top:-3px; left:6px; }

 

right

语法： right : auto | length

参数： 

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

 

说明： 

检索或设置对象与其最近一个定位的父对象右边相关的位置。

对应的脚本特性为right。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posRight，pixelRight等特性。请参阅我编写的其他书目。

示例：

div { position: absolute; right: 1in; }

div { position:relative; top:-3px; right:6px; }

 

bottom

语法： bottom : auto | length

 

参数： 

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

 

说明： 

检索或设置对象与其最近一个定位的父对象底边相关的位置。

对应的脚本特性为bottom。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posBottom，pixelBottom等运行时特性。请参阅我编写的其他书目。

 

示例： 

div { position: absolute; bottom: 1in; }

div { position:relative; bottom:6px; }

 

left

语法： left : auto | length

 

参数： 

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

 

说明：

检索或设置对象与其最近一个定位的父对象左边相关的位置。

对应的脚本特性为left。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posLeft，pixelLeft，以及对象的offsetLeft等特性。请参阅我编写的其他书目。

 

示例： 

div { position: absolute; left: 1in; }

div { position:relative; top:-3px; left:6px; }