div css background背景

背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性，甚至包括background-attachment，还为我们介绍了它在即将到来的CSS3中的样子，还有那些新加入的背景属性。

使用CSS2中的背景属性

回顾

css2中有五个与背景相关的属性。它们是：

background-color: 完全填充背景的颜色                    

background-image: 用作背景的图片                           

background-position: 确定背景图片的位置                 

background-repeat: 确定背景图片是否重复铺平            

background-attachment: 确定背景图片是否随页面滚动   

这些属性能够写在一个简单的属性中：background。必须指出background负责元素内容部分的背景，包括padding和border，但不包括margin。在Firefox, Safari 和Opera, 以及IE8中是这样处理的。不过在IE7 和万恶的IE6中就没包括border，区别就像下面的图片示例显示的那样 。

    在IE7 和IE6中Background没有包括border

基本属性

Background color属性

background-color用来描述设置填充背景的颜色。有多种方法来定义确定填充的颜色，下列方法都是等效的：

background-color: blue;

background-color: rgb(0, 0, 255);

background-color: #0000ff;

background-color 也能设置成transparent，这样就能让其下的元素显示出来。

Background image属性

background-image 让你可以使用自己的图片作为背景。它和background-color关系密切。一旦你的图片不足以平铺整个元素背景，空出的部分将显示background-color设置的颜色。它的使用极其简单，不过要记得图片与css文件的位置关系：

background-image: url(image.jpg);

如果图片在文件夹内，就写成这样，均是用得相对路径:

background-image: url(images/image.jpg);

Background repeat属性

默认情况下你的图片会水平和垂直重复直至铺满整个元素。但有时你可能只想向一个方向重复。那么就这么设置：

background-repeat: repeat; /* 默认值. 会在所有方向重复铺展图片*/

background-repeat: no-repeat; /* 不重复。图片只出现一张*/

background-repeat: repeat-x; /* 水平重复铺展*/

background-repeat: repeat-y; /* 垂直重复铺展*/

background-repeat: inherit; /* 使用父元素的background-repeat属性值. */

Background position属性

background-position属性控制着背景图片在元素中的位置。掌握的关键是background-position 是图片的左上角定位。

下面是background-position属性的演示。当然我们把background-repeat 属性设置为no-repeat。

/* Example 1: 默认. */

background-position: 0 0; /* i.e. 元素的左上角. */

/* Example 2: 移向右边. */

background-position: 75px 0;

/* Example 3: 移向左边. */

background-position: -75px 0;

/* Example 4: 向下移动. */

background-position: 0 100px;

                 你可以随意设置背景图片的位置

background-position 属性也可以以关键字，百分比等单位工作，并非一定要精确使用像素（px）。

关键字很常用，在水平方向有:

left

center

right

垂直方向有:

top

center

bottom

就像之前那样使用它们:

background-position: top right;

百分比的使用方法也一样:

background-position: 100% 50%;

效果就是这样：

笑脸图片被设置到元素的右边的中间

Background attachment属性

background-attachment属性定义用户滚动页面时背景图片会发生什么。它有三个