CSS背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

CSS 在这方面的能力远远在 HTML 之上。

具体参数值在下面 一 一介绍

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment属性有3种值的方式：

1) scroll
默认值。背景图像会随着页面其余部分的滚动而移动。如p{background-attachment:scroll;}

2) fixed
当页面的其余部分滚动时，背景图像不会移动。如
p{background-attachment:fixed;}

3) inherit
规定应该从父元素继承 background-attachment 属性的设置。如p{background-attachment:inherit;}

background-color 属性设置元素的背景颜色。
该属性有4种值的方式：

1) color_name
规定颜色值为颜色名称的颜色（比如 red）。如p{background-color:red;} 页面上显示为flashflash

2) hex_number
规定颜色值为十六进制值的颜色（比如 #ff0000）。如:p{background-color:#ff0000;} 页面上显示为flashflash

3) rgb_number
规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。如:p{background-color:rgb(255,0,0);} 页面上显示为flashflash

4) transparent
背景颜色为透明。如:p{background-color:transparent;}

5) inherit
规定应该从父元素继承颜色。

background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

语法：

p{  background-image: url(images/bgimage.gif) }

background-position 属性设置背景图像的起始位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body{ 
   background-image:url('images/eg_bg_03.gif');
   background-repeat:no-repeat;
   background-position:center; 
}

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p{ 
   background-image:url('images/bgimg.gif');
   background-repeat:no-repeat;
   background-position:center; 
}

background-position 属性设置背景图像的水平位置。
如：以下表示距离水平方向 2px

p{ 
   background-image:url('images/bgimg.gif');
   background-repeat:no-repeat;
   background-positionX :2px; 
}

background-position 属性设置背景图像的垂直位置。
如：以下表示距离垂直方向 2px

p{ 
   background-image:url('images/bgimg.gif');
   background-repeat:no-repeat;
   background-positionY :2px; 
}

background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
该属性5种值的方式：

1) repeat
默认。背景图像将在垂直方向和水平方向重复。如p{background-repeat:repeat;}

2) repeat-x
背景图像将在水平方向重复。如p{background-repeat:repeat-x;}

3) repeat-y
背景图像将在垂直方向重复。如p{background-repeat:repeat-y;}

4) no-repeat
背景图像将仅显示一次。如p{background-repeat:no-repeat;}

5) inherit
规定应该从父元素继承 background-repeat 属性的设置。如p{background-repeat:inherit;}

习题1 | 习题2 | 习题3 | 习题4 | 习题5