CSS基础教程（四） 背景

关于怎么引入CSS至HTML文档，前面在HTML基础教程已经说过了，这里就不做介绍了，如果不了解，请点击：HTML基础教程之css层叠样式表

这里就直接进入CSS的属性定义以及作用介绍了。

一、背景颜色

在CSS中背景颜色是由background-color来定义的，实例如下：

body {background-color:#b0c4de;}

1、十六进制，如：#b0c4de；

2、RGB，如rgb(255,0,0)；

3、颜色名称，如："red"。

如果一个页面中很多标签定义了自己的样式，那么会覆盖处理。

二、背景图像

在CSS背景中，使用图像作为背景是由background-image定义的。

body {background-image:url('bgdesert.jpg');}

三、水平或者垂直平铺（背景图像）

在背景图像的使用中，你一定会遇到平铺的问题，比如说你定义的div宽度为1000px;但是图像只有100px;那么图像不够遮盖这个div背景的，那么可以设置图片在X方向重复这张图片，直至铺满。

在设置平铺的时候使用的是background-repeat属性，如果想要在x方向（水平方向）重复这张图片的话需要设置值为repeat-x。

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

如果想要在y（垂直方向）重复图片的话，就设置值为repeat-y即可(PS:默认情况下是平铺的)。

如果不想图像重复平铺，可以设置值为:no-repeat.

四、图像定位

在默认情况下，背景图片的显示会在左上角开始，但是我们可以通过background-position属性来改变位置。

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

五、是否固定（背景图片）

在CSS背景属性中还有一个属性，叫做background-attachment,这个属性很有意思，是用来设置背景图片是否随浏览器滚动条滚动的，默认情况下，背景图片是会随着滚动条滚动的，就是当一个页面很长时，滚动浏览器滚动条图片会逐渐被拉出屏幕，如果想要图片固定在浏览器上，不随页面的滚动而移动的话，可以设置这个属性为：fixed。

body
{ 
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

六、属性简写

在上述代码中，我们讲述了背景颜色以及背景图片等属性，我们都是使用的是background-X来定义的，其实还有一种综合的方式，如下：

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

1、background-color

2、background-image

3、background-repeat

4、background-attachment

5、background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.