6.1 设计网页背景样式
背景是网页设计的重要元素之一，一个背景优美的网页，总能吸引众多访问者。例如，喜庆类网站都是以火红背景为主题，CSS的强大表现功能在背景方面同样发挥得淋漓尽致。
6.1.1 案例1——设置背景颜色
background-color属性用于设定网页背景色，同设置前景色的color属性一样，background-color属性接受任何有效的颜色值，而对于没有设定背景色的标记，默认背景色为透明（transparent）。
其语法格式为：
{background-color : transparent | color}
关键字transparent是个默认值，表示透明。背景颜色color设定方法可以采用英文单词、十六进制、RGB、HSL、HSLA和RGBA。
【例6.1】（案例文件：ch06\6.1.html）
在IE 11.0浏览器中浏览效果如图6-1所示，可以看到网页背景色显示浅绿色，而字体颜色为蓝色。注意，在网页设计时，其背景色不要使用太艳的颜色，会给人一种喧宾夺主的感觉。
图6-1 设置背景色
background-color不仅可以设置整个网页的背景颜色，同样还可以设置指定HTML元素的背景色，例如设置h1标题的背景色，设置段落p的背景色。可以想象，在一个网页，可以根据需要设置不同HTML元素的背景色。
【例6.2】（案例文件：ch06\6.2.html）
在IE 11.0浏览器中浏览效果如图6-2所示，可以看到网页中标题区域背景色为红色，段落区域背景色为灰色，并且分别为字体设置了不同的前景色。
图6-2 设置HTML元素背景色
6.1.2 案例2——设置背景图片
不但可以使用背景色来填充网页背景，同样也可以使用背景图片来填充网页。通过CSS3属性可以对背景图片进行精确定位。background-image属性用于设定标记的背景图片，通常情况下，在标记<body>中应用，将图片用于整个主体中。
background-image语法格式如下所示。
background-image : none | url (url)
其默认属性是无背景图，当需要使用背景图时可以用url导入。url可以使用绝对路径，也可以使用相对路径。
【例6.3】（案例文件：ch06\6.3.html）
在IE 11.0浏览器中浏览效果如图6-3所示，可以看到网页中显示背景图，但如果图片尺寸小于整个网页大小时，此时图片为了填充网页背景，会重复出现并铺满整个网页。
图6-3 设置背景图片
在设定背景图片时，最好同时也设定背景色，这样当背景图片因某种原因无法正常显示时，可以使用背景色来代替。当然，如果正常显示，背景图片会覆盖背景色。
6.1.3 案例3——背景图片重复
在进行网页设计时，通常都是一个网页使用一张背景图片，如果图片尺寸小于网页尺寸时，会直接重复铺满整个网页，但这种方式不适用于大多数页面，在CSS中可以通过background-repeat属性设置图片的重复方式，包括水平重复、垂直重复和不重复等。
background-repeat属性用于设定背景图片是否重复平铺。各属性值说明如表6-1所示。
background-repeat属性重复背景图片是从元素的左上角开始平铺，直到水平、垂直或全部页面都被背景图片覆盖。
表6-1 background-repeat属性
【例6.4】（案例文件：ch06\6.4.html）
在IE 11.0浏览器中浏览效果如图6-4所示，可以看到网页中显示背景图，但图片以默认大小显示，而没有对整个网页背景进行填充。这是因为代码中，设置了背景图片不重复平铺。
图6-4 背景图片不重复
同样，可以在上面的代码中设置background-repeat的属性值为其他值，例如可以设置其值为repeat-x，表示图片在水平方向平铺。此时，在IE 11.0浏览器中的浏览效果如图6-5所示。
图6-5 背景图片水平方向平铺
6.1.4 案例4——背景图片显示
对于一个文本较多，一屏显示不了的页面来说，如果使用的背景图片不足以覆盖整个页面，而且只将背景图片应用在页面的一个位置上，那么在浏览页面时，肯定会出现看不到背景图片的情况；再者，还可能出现背景图片初始可见，而随着页面的滚动又不可见。也就是说，背景图片不能时刻随着页面的滚动而显示。
要解决上述问题，需要使用background-attachment属性，该属性用来设定背景图片是否随文档一起滚动。该属性包含两个属性值：scroll和fixed，并适用于所有元素，如表6-2所示。
表6-2 background-attachment属性值
使用background-attachment属性，可以使背景图片始终处于视野范围内，以避免出现因页面的滚动而消失的情况。
【例6.5】（案例文件：ch06\6.5.html）
在IE 11.0浏览器中浏览效果如图6-6所示，可以看到网页background-attachment属性的值为fixed时，背景图片的位置固定并不是相对于页面的，而是相对于页面的可视范围。
图6-6 背景图片显示
6.1.5 案例5——设置背景图片位置
我们知道，背景图片位置都是从设置了background属性的标记（例如body标记）的左上角开始出现，但在实际网页设计中，可以根据需要直接指定背景图片出现的位置。在CSS3中，可以通过background-position属性轻松调整背景图片的位置。
background-position属性用于指定背景图片在页面中所处的位置。该属性值可分为四类：绝对定义位置（length）、百分比定义位置（percentage）、垂直对齐值和水平对齐值。其中垂直对齐值包括top、center和bottom，水平对齐值包括left、center和right，如表6-3所示。
表6-3 background-position属性值
垂直对齐值还可以与水平对齐值一起使用，从而决定图片的垂直位置和水平位置。
【例6.6】（案例文件：ch06\6.6.html）
在IE 11.0浏览器中浏览效果如图6-7所示，可以看到网页中显示背景，其背景图片的位置是从顶部和右边开始。
图6-7 设置背景图片位置
使用垂直对齐值和水平对齐值只能格式化地放置图片，如果在页面中要自由地定义图片的位置，则需要使用确定数值或百分比。这样在上面代码中，将
background-position:top right;
语句修改为
background-position:20px 30px
在IE 11.0浏览器中浏览效果如图6-8所示，可以看到网页中显示背景，其背景图像位置是从左上角开始，但并不是从（0,0）坐标位置开始，而是从（20,30）坐标位置开始的。
图6-8 准确指定背景位置