我的书签
添加书签
移除书签12.4 颜色和背景属性
下面介绍设置元素的颜色，设置背景颜色和背景图像。
12.4.1 颜色属性color
color属性用来设置指定元素的颜色，颜色值是一个关键字或一个16进制的RGB值。
语法：
说明：
关键字就是颜色的英文名称，如red、green、blue分别表示红、绿、蓝。
用16进制数来设置颜色，是因为16进制数正好能表达0到255的数值。使用此种方法可以设置1677万种颜色。在完全表示颜色的时候使用#加上16进制数即可，如下所示：
举例：
此段代码中首先在<head></head>之间，用<style>定义了gh标记中的color属性为紫色#9900ff，然后在正文中对文本应用gh样式，在浏览器中预览效果，如图12.8所示。
图12.8 设置颜色属性效果
12.4.2 背景颜色background-color
在HTML中，利用<body>标记中的bgcolor属性可以设置网页的背景颜色，而在CSS中使用background-color属性不但可以设置网页的背景颜色，还可以设置文字的背景颜色。
语法：
举例：
此段代码中首先在<head></head>之间，用<style>定义了gh标记中的背景颜色属性background-color为#ff99ff，然后在正文中对文本应用gh样式，利用body {background-color:#ff99cc;}定义整个网页的背景颜色。在浏览器中预览效果，如图12.9所示，可以看到应用样式的文本和整个网页有不同的背景颜色。
图12.9 设置文本和整个网页的背景颜色
12.4.3 背景图像background-image
使用background-image属性可以设置元素的背景图像。
语法：
说明：
图像地址可以是绝对地址，也可以是相对地址。
举例：
此段代码中首先在<head></head>之间，用<style>定义了1标记中的背景图像属性background-image为url（images/ber_12.gif），然后对<body>应用1样式，在浏览器中预览效果，如图12.10所示。
图12.10 背景图像效果
12.4.4 背景重复background-repeat
使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。
语法：
说明：
no-repeat表示背景图像不平铺；repeat表示背景图像平铺排满整个网页；repeat-x表示背景图像只在水平方向上平铺；repeat-y表示背景图像只在垂直方向上平铺。
举例：
此段代码中首先在<head></head>之间，用<style>定义了1标记中的背景图像属性background-image为url（images/ber_12.gif），background-repeat属性设置为不平铺no-repeat，然后对<body>应用1样式，在浏览器中预览效果，如图12.11所示。将background-repeat属性设置为横向重复repeat-x和纵向重复repeat-y，效果分别如图12.12和图12.13所示。
图12.11 设置背景图像不平铺
图12.12 设置背景图像横向重复
图12.13 设置背景图像纵向重复
12.4.5 背景附件background-attachment
使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。
语法：
说明：
scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面上不动，只有其他的内容随滚动条滚动。
举例：
在代码中加粗部分的标记用来设置背景附件，将背景附件设置为固定，在浏览器中预览效果，如图12.14所示。拖动滚动条，让页面中的文字向上滚动，发现只有文字上滚，而背景图像依然在页面的左上端，如图12.15所示。
图12.14 设置背景附件效果
图12.15 拖动滚动条效果
12.4.6 背景位置background-position
背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。替换元素包括img、input、textarea、selcet和object。
语法：
说明：
语法中的取值包括两种，一种是采用数字，另一种是关键字描述。
表12-1 background-position属性的长度设置值
| 设 置 值 | 说 明 |
| X（数值） | 设置网页的横向位置，其单位可以是所有尺度单位 |
| Y（数值） | 设置网页的纵向位置，其单位可以是所有尺度单位 |
表12-2 background-position属性的百分比设置值
| 设 置 值 | 说 明 |
| 0% 0% | 左上位置 |
| 50% 0% | 靠上居中位置 |
| 100% 0% | 右上位置 |
| 0% 50% | 靠左居中位置 |
| 50% 50% | 正中位置 |
| 100% 50% | 靠右居中对齐 |
| 0% 100% | 左下位置 |
| 50% 100% | 靠下居中对齐 |
| 100% 100% | 右下位置 |
表12-3 background-position属性的关键字设置值
| 设 置 值 | 说 明 |
| Top left | 左上位置 |
| Top center | 靠上居中位置 |
| Top right | 右上位置 |
| Left center | 靠左居中位置 |
| Center center | 正中位置 |
| Right center | 靠右居中对齐 |
| Bottom left | 左下位置 |
| Bottom center | 靠下居中对齐 |
| Bottom right | 右下位置 |
举例：
此段代码中首先在<head></head>之间，用<style>定义了g标记中的背景图像background-image为url（images/gj.gif），背景位置属性设置为左上位置left top，然后对<body>应用g样式，在浏览器中预览效果，如图12.16所示。
图12.16 设置背景位置
12.4.7 背景复合属性background
使用背景复合属性background可以简化CSS代码。
语法：
说明：
取值范围可以包括背景颜色、背景图像、背景重复、背景附件和背景位置，各值之间用空格相连。
举例：
在代码中加粗部分的标记用来设置背景复合属性，在浏览器中预览效果，如图12.17所示。
图12.17 背景复合属性效果
背景属性是网页设计中应用非常广泛的一种技术。通过背景颜色或背景图像，能给网页带来丰富的视觉效果，如图12.18所示的网页中就采用了CSS定义网页的背景。
图12.18 用CSS定义网页的背景
