css基础教程属性篇（5）

背景(background)

包括background-color, background-image, background-repeat, background-attachment, background-position五种属性.

1. background-color: 指背景颜色, 其属性值有三种形式, 十六进制, 颜色名称, rgb值. 目前最为常用的是”#+十六进制数”. 例: 本站显示代码的段落背景为#EEEEEE的灰色, 代码及示例如下:

background-color: #EEEEEE;

2. background-image: 指背景图片, 其属性值为背景图片的地址, 代码和格式如下:

background-image: url(/file/UploadPic/20087/23/200872312565582.png);

例: 本站首页的第一篇文章标题前有个”NEW”图标, 查看css可见如下代码:

#homeheadline a{
color:#444;
padding: 30px 68px 0 40px;
margin:0;
background:url(images/new.png) no-repeat 0 16px ;
}

3. background-repeat: 指背景图片的重复与否以及重复方式, 有no-repeat, repeat, repeat-x, repeat-y四种属性值.

• no-repeat: 即无论背景图片的大小, 只显示单个背景图片,  如首页的第一篇文章标题前的”NEW”图标, 代码如上所示;

• repeat: 指背景图片横向和纵向重复连续显示;

• repeat-x: 指背景图片横向重复连续显示;

• repeat-y 指背景图片纵向重复连续显示;例: 查看本站css文件,可以看到以下代码:
  body {
  font: normal 12px/1.5 Georgia, sans-serif;
  text-align:left;
  background:#444 url(images/bodybg.jpg) repeat-y;
  }

可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加.

4. background-attachment: 指背景图片的附着方式, 有scroll(默认属性)和fixed两种属性值. scroll指背景图片随页面的滚动而滚动, 而fixed属性值则可使背景图片固定于浏览器的某个位置, 不随页面滚动而滚动. 如下例所示, 您可以试着滚动本页面来看看两图的差别, 左边为scroll, 右边为fixed(请用IE观看以下演示):

X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X

X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X