第18章　设置背景

本章所讲的背景是CSS中的背景属性，背景属性也是复合属性，由一系列与背景相关的属性组成，如背景颜色、背景图像等，与HTML中的背景不同的是，在CSS中背景属性用background表示。背景在网页布局中非常重要，如游戏类型的网站，里面包含大量图片，而且在有背景颜色的条件下还可能显示部分文字。

本章来学习如何设置网页中的对象的背景，通过学习，会了解以下内容：

❑如何设置背景颜色；

❑如何设置图像的滚动；

❑如何设置背景图像的位置；

❑如何铺排背景图像；

❑怎样使用背景属性。

18.1　背景语法

背景是指对象在网页中显示的背景颜色或图像，如何设置背景是本节的重点，设置背景和前面学习的设置字体一样，也是复合属性，其语法用background表示，后面接的参数如下。

＜！-背景颜色—＞

Background：background-color|background-image|background-repeat|background-

attachment|background-position

复合属性background冒号接的这些参数分别表示为背景颜色、背景图像、背景图像的铺排、背景图像滚动和背景图像的定位。这些值可以是单个的也可以是多个，如是单个的值，其他参数的值就是默认值，background的默认值分别如下。

Background：transparent、none、repeat、scroll、0%、0%

背景的对象可以是HTML标记，也可以是CSS中的ID或CLASS对象，下面介绍如何设置对象的背景。

/CSS样式，设置标记样式/

01 div{background：blue no-repeat scroll 50%60%；}

02 body{background：url（"images/bg1.gif"）repeat-y；}

03 #myid{background：url（"images/bg2.gif"）top；}

上述代码在CSS中，对不同的对象设置不同的背景，CSS代码的第1行的代码表示对所有的DIV层设置背景为蓝色，背景图像没有重复排铺，且有滚动，显示横坐标的50%和纵坐标的60%；第2行的代码表示对＜body＞，即整个网页的背景由images文件夹下的bg1.gif图像显示，且只重复显示Y轴，其他没出现的值为默认；第3行的代码表示层中的ID为myid，其背景设置用的是images文件夹下的bg2.gif图像，顶点对齐显示图像，代码18.1表示了3种不同的背景。

代码18.1　源代码\第18章\背景的语法.html

01 ＜html＞

02 ＜head＞

03 ＜title＞背景的语法＜/title＞

04 ＜style type="text/css"＞

05 body

06 {

07 /设置整个网页的背景颜色/

08 background：#ccc；

09 }

10 #box

11 {

12 /设置宽度和高度/

13 width：200px；

14 height：100px；

15 /设置边框/

16 border：1px solid red；

17 /设置字体颜色/

18 color：#ffffff；

19 /设置背景颜色，引入photo.gif为背景，重复X轴/

20 background：url（"photo.gif"）repeat-x；

21 }

22 ＜/style＞

23 ＜/head＞

24 ＜body＞

25 ＜！-设置层—＞

26 ＜div id="box"＞

27 HTML+CSS完全自学手册

28 ＜/div＞

29 ＜/body＞

30 ＜/html＞

【代码解析】上述代码设置两个对象的背景，首先是整个网页（body）的背景颜色值为CCCCCC（代码第5～9行），然后对层ID为box的对象（代码第26行），设置背景是同目录下的photo.gif图像，按Y轴重复显示，效果如图18.1所示。

图　18.1　设置背景

注意　background里面的参数并不要求全部设置，那些没有设置的即为默认值，如background为：#ccc，背景颜色为CCCCCC。