第五章   CSS背景

背景(background),文字颜色可以使用color属性,但是包含文字的p段落,DIV层,page页面等的颜色与背景图片可以使用与background等属性.

通常使用background-color定义背景颜色,background-image定义背景图片,background-repeat定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定义背景图片随滚动轴的移动方式.

第一节：CSS background-color 属性

background-color -- 背景色,定义背景的颜色

Ø  取值: <color> | transparent | inherit

Ø  <color>: 颜色表示法

Ø  transparent: 透明

Ø  inherit: 继承

Ø  初始值: transparent

Ø  继承性: 是

Ø  适用于: 所有元素

Ø  background:背景.color:颜色.

示例

body

{

       background-color:green;

}

第二节：CSS background-image 属性

background-image -- 定义背景图片

Ø  取值: <url> | none | inherit

Ø  none: 无

Ø  inherit: 继承

Ø  初始值: none

Ø  继承性: 否

Ø  适用于: 所有元素

Ø  background:背景.image:图片.

示例

body

{

       background-image:url('html_table.png');

}

p

{

       background-image:none;

}

div

{

       background-image:url('list-orange.png');

}

第三节：CSS background-repeat 属性

background-repeat -- 定义背景图片的重复方式

Ø  取值: repeat | repeat-x | repeat-y | no-repeat | inherit

Ø  repeat: 平铺整个页面,左右与上下

Ø  repeat-x: 在x轴上平铺,左右

Ø  repeat-y: 在y轴上平铺,上下

Ø  no-repeat: 图片不重复

Ø  inherit: 继承

Ø  初始值: repeat

Ø  继承性: 否

Ø  适用于: 所有元素

Ø  background:背景.repeat:重复.

示例

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;

}

第四节：CSS background-position 属性

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

示例

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;

}

background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.

第五节: CSS background-attachment 属性

background-attachment -- 定义背景图片随滚动轴的移动方式

Ø  取值: scroll | fixed | inherit

Ø  scroll: 随着页面的滚动轴背景图片将移动

Ø  fixed: 随着页面的滚动轴背景图片不会移动

Ø  inherit: 继承

示例

body

{

       background-image:url('list-orange.png');

       background-attachment:fixed;

       background-repeat:repeat-x;

       background-position:center center;

}

第六节：CSS background 属性

background -- 五个背景属性可以全部在此定义

Ø  取值: [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit

Ø  [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]: 背景颜色,图像等的一个属性或多个属性

Ø  inherit: 继承

示例

body

{

       background:url('list-orange.png') repeat-x center;

}

来源CSS中国 www.csschina.net