CSS背景

CSS背景 - background 属性

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

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

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

CSS背景 - background-attachment 属性

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

CSS背景 - background-color 属性

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
规定应该从父元素继承颜色。

CSS背景 - background-image 属性

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

语法:

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

CSS背景 - background-position 属性

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; 
}
CSS背景 - background-positionX 属性

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

p{ 
   background-image:url('images/bgimg.gif');
   background-repeat:no-repeat;
   background-positionX :2px; 
}
CSS背景 - background-positionY 属性

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

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

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