CSS Background

Background Color (背景颜色)
background - color属性指定一个元素的背景颜色.
一个网页的背景颜色是指在body内定义的:
Example
body {background-color:#b0c4de;}

Background Image (背景图片)
background - image属性指定一个元素的背景图像使用.默认情况下,图像重复,因此它涵盖了整个元素.
可以设置页面的背景图片是这样的:
Example
body {background-image:url('paper.gif');}

Background Image - Repeat Horizontally or Vertically (背景图片 - 横向或纵向重复)
默认情况下,background - image属性重复图像的水平和垂直方向.
应水平或垂直的重复某些图像,或他们会看起来很奇怪,你可以在一个页面试试
Example
body
{
background-image:url('gradient2.png');
}

如果图像只重复水平(重复- X),背景会更好看:

Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Background Image - Set position and no-repeat(背景图片 - 设置位置,而且没有重复)
备注:当使用背景图像,使用图像文本不干扰.只有一次是显示图像的背景重复属性指定
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

在上面的例子中,背景图像显示在同一个地方的文本.我们要改变图像的位置,因此,它并没有打扰太多的文字.
背景位置属性指定图像的位置
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Background - Shorthand property (背景 - 速记属性)
正如你可以看到从上面的例子中,有许多属性与背景处理时要考虑的.为了缩短代码,它也可以指定在一个单一属性的所有属性.这就是所谓的速记属性.
为背景的速记属性是简单的"背景":
Example
body {background:#ffffff url('img_tree.png') no-repeat right top;}

使用速记属性的属性值的顺序是:

background        设置在一个声明中所有的背景属性
background-attachment    设置背景图像是否固定或滚动页面的其余部分
background-color    设置元素的背景颜色
background-image    设置元素的背景图片
background-position    设置背景图像的起始位置
background-repeat    设置如何将重复的背景图像
如果属性值之一是缺少,只要存在这样的顺序即可。