一、CSS背景

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

　　可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。

　　在这个网页中，使用了下面的CSS样式，因此可以看到页面背景和文本背景的颜色。

<style type="text/css">

body {
background-color: #FFCC66;
}

.texta {
color: #990000;
background-color: #FC9804;
}
</style>

.textb {
color: white;
background-color: black;
}

</style>

texta定义的文本格式

textb定义的文本格式

二、背景图像

　　要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。下面我们用个CSS实例实现表格背景图的变化，鼠标离开表格时，和鼠标在表格内时，显示以下两个不同的背景图。

图1：

图2

先在网页头部上面的样式表中增加以下CSS样式：

table.off {
background-image: url(../../suca/bg/bjhen/3/back_109.gif);
}
table.on{
background-image: url(back_11.jpg)
}

接着在表格属性中添加以下红色部分的代码

<table id="t1" class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" width="980" border="0" align="center" cellpadding="0" cellspacing="0">

三、背景图重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body
{
background-image: url(背景图地址文件名);
background-repeat: repeat-y;
}

 

四、背景图定位

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body
{
background-image:url(背景图地址文件名);
background-repeat:no-repeat;
background-position:center;
}

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

例如，top right 使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对象垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。

 

五、百分数值和长度值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这可以这样：

body
{
background-image: url(图像文件名);
background-repeat:no-repeat;
background-position:50% 50%;
}

点这里看效果

（注意：网页的垂直方向的内容要大小或等于图像的高度，否则只能看到水平居中，下面一半在网页顶端的图像。）

这也是百分数值：
body
{
background-image:url(图像文件名);
background-repeat:no-repeat;
background-position:66% 33%;
}

这个是长度值:
body
{
background-image:url(图像文件名);
background-repeat:no-repeat;
background-position:50px 100px;
}

CSS 背景属性归纳列表