background -- 五个背景属性可以全部在此定义 取值: [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]: 背景颜色,图像等的一个属性或多个属性 inherit: 继承 初始值: 根据五个背景属性的默认值 继承性: 否
适用于: 所有元素 注：background属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性。说明：前面的讲的五个背景属性完全可以使用background属性代替.
示例 body { background:transparent url('list-orange.png') repeat-x scroll center center;
} 使用background解决所有问题. body { background:url('list-orange.png') repeat-x scroll center center; } 由于背景颜色background-color的默认值为transparent,所以可以省略,这个例子和上面的例子是等价的. body { background:url('list-orange.png') repeat-x center; } 由于背景图片随滚动轴的移动方式background-attachment的默认值为scroll,所以可以省略,背景图片的位置background-position中的属性值center center等价于center,这个例子和上面的例子也是等价的.
background-color -- 背景色,定义背景的颜色 取值: <color> | transparent | inherit <color>: 颜色表示法 transparent: 透明 inherit: 继承 初始值: transparent 继承性: 是 适用于: 所有元素 background:背景.color:颜色.
注：background-color属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性。背景色与前景色对应,可以定义背景的颜色.
示例 body { background-color:green; } 定义网页的背景使用绿色.
background-image -- 定义背景图片 取值: <uri> | none | inherit <uri>: URI none: 无 inherit: 继承 初始值: none 继承性: 否 适用于: 所有元素 background:背景.image:图片. 注：background-image属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性
示例 body { background-image:url('html_table.png'); } p { background-image:none; } div { background-image:url('list-orange.png'); } 定义网页的背景图片为html_table.png,段落p不使用背景图片,div使用list-orange.png.
background-repeat -- 定义背景图片的重复方式 取值: repeat | repeat-x | repeat-y | no-repeat |
inherit repeat: 平铺整个页面,左右与上下 repeat-x: 在x轴上平铺,左右 repeat-y: 在y轴上平铺,上下 no-repeat: 图片不重复 inherit: 继承 初始值: repeat 继承性: 否 适用于: 所有元素 background:背景.repeat:重复. 注：background-repeat属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性
示例 body { background-image:url('list-orange.png'); background-repeat:no-repeat;
} div { background-image:url('list-orange.png'); background-repeat:repeat-y; background-position:right; }
屏幕左上角显示一个橙色点,div的右侧显示一系列橙色点.
background-position -- 定义背景图片的位置 取值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
水平 left: 左 center: 中 right: 右 垂直 top: 上 center: 中
bottom: 下 垂直与水平的组合 x-% y-%
x-pos y-pos inherit: 继承 初始值: 0% 0% 继承性: 否
适用于: 所有元素 background:背景.position:位置. 注：background-position属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性
示例 body { background-image:url('list-orange.png'); background-repeat:no-repeat;
} p { background-image:url('list-orange.png'); background-position:right bottom ; background-repeat:no-repeat; } div { background-image:url('list-orange.png'); background-position:50% 20% ; background-repeat:no-repeat; } 屏幕左上角显示一个橙色点.p段落的左下角显示一个橙色点.div中间偏上显示一个橙色点. 说明 background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.
例如: <percentage> <percentage> 左上角为0%, 0%. 右下角为100%, 100%.例如58%,56%就是从左上角算起,右移58%,下移56%. <length> <length> 6cm 8cm,从左上角算起,右移6cm,下移8cm.
background-attachment -- 定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承 初始值: scroll 继承性: 否 适用于: 所有元素 background:背景.attachment:附着.
注：IE6只有body元素支持fixed属性值，background-attachment属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性。
示例 body { background-image:url('list-orange.png'); background-attachment:fixed;
background-repeat:repeat-x; background-position:center center;
} 屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.