6.4 设置网页背景颜色和背景图
为了让网页面呈现更好的效果，还可以设置网页背景颜色和背景图。
6.4.1 设置背景颜色
background-color属性用于设置背景颜色，它接受任何有效的颜色值，代码如下：
background-color：color;
【例6-10】（实例文件：ch06\Chap6.10.html）设置背景颜色。
相关的代码实例请参考Chap6.10.html文件，在IE浏览器中运行的结果如图6-11所示。
图6-11 设置背景颜色
6.4.2 设置背景图
background-image属性用于设置背景图，代码如下：
background-image: url("src");
src表示背景图的路径。
【例6-11】（实例文件：ch06\Chap6.11.html）设置背景图。
相关的代码实例请参考Chap6.11.html文件，在IE浏览器中运行的结果如图6-12所示。
图6-12 设置背景图
6.4.3 设置背景图平铺
background-repeat用于设置背景图是否平铺，它的属性值如表6-3所示。
表6-3 background-repeat属性值
【例6-12】（实例文件：ch06\Chap6.12.html）设置图像不平铺方式。
相关的代码实例请参考Chap6.12.html文件，在IE浏览器中运行的结果如图6-13所示。
图6-13 设置背景图像不平铺
6.4.4 设置背景图位置
background-position属性设置背景图像的起始位置，它的属性值如表6-4所示。
表6-4 background-position属性值
【例6-13】（实例文件：ch06\Chap6.13.html）设置背景图像位置。
相关的代码实例请参考Chap6.13.html文件，在IE浏览器中运行的结果如图6-14所示。
图6-14 设置背景图位置
6.4.5 设置渐变背景
CSS 3可以让背景产生渐变效果，渐变属性有两种，即线性渐变（linear-gradient）和径向渐变（radial-gradient）。
线性渐变语法如下：
linear-gradient（方向,颜色1,位置1,颜色2,位置2...）
关于渐变，虽然浏览器已经支持，但webkit内核的浏览器还没有去掉前缀-webkit-，语法和新标准也不太一样，要在Chrome、Safari、Firefox中实现渐变效果，需要加上前缀-webkit-。IE9+需要加前缀-ms-。
对于线性渐变的方向，只要设置起始位置，例如top表示由上至下，right表示由右到左。bottom表示由下到上，left表示由左到右，top right表示由右上到左下，也可以用角度表示30°表示由左下到右上，-30°表示由左上到右下。
【例6-14】（实例文件：ch06\Chap6.14.html）线性渐变（linear-gradient）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{ width: 200px;height: 200px;float: left; margin-left: 15px;text-align: center;}
/*设置线性渐变背景颜色，兼容webkit内核的浏览器*/
.div1{background: -webkit-linear-gradient(left, black, white)}
.div2{background: -webkit-linear-gradient(left top, black, white)}
.div3{background: -webkit-linear-gradient(45deg, black, white)}
</style>
</head>
<body>
<div class="div1">由左至右</div>
<div class="div2">由左上至右下</div>
<div class="div3">45deg方向</div>
</body>
</html>
相关的代码实例请参考Chap6.14.html文件，在Firefox浏览器中运行的结果如图6-15所示。
图6-15 渐变背景实例