2024年7月17日发(作者：)

CSS 设置色彩属性

任何美观的网页都离不开背景的修饰，以及丰富的色彩。没有色彩的网页是没

有生机的，这就意味着一个优秀的网页设计者不仅要能够合理的安排页面布局，而

且还要具有一定的色彩视觉和色彩的搭配能力，这样才能够使网页更加精美也具表

现力，并给浏览者以亲切感。

现在，依赖CSS的强大功能，能够为页面增加在更加多样的色彩及背景选择。

并且能够统一页面元素的色彩配置。

1、color属性

任何一个页面元素都具有color属性，该属性用于设置前景色，并且常用来设

置页面元素的字体颜色。该属性的基本语法如下所示：

color:<颜色>

该属性的初始值由浏览器决定。color属性值就可以使用下面三种设定方式：第

一种是直接使用CSS中预置的标准色名称，如red、blue等；第二种是使用十六进

制颜色，如#FF0000、#0000FF等；第三种是使用RGB颜色，如RGB(255,0,0)、R

GB(0,0,255)等。

为了避免与用户的样式表之间的冲突，背景和颜色属性应该始终一起

指定。

2、背景属性

通过设置背景来美化页面，常用的背景属性有：background-color属性、backgr

ound-image属性、background-repeat属性、background-position属性、background-at

tachment属性和background属性。

（1）background-color属性用于设定背景色。基本语法如下所示：

background-color: <值>

该属性所允许的值有任何有效的颜色值或transparent (透明)。该属性的初始值

为transparent (透明)。

同color属性一样，background-color属性接受，而对于没有设定背景色的标记，

采用透明（tranaparent）背景。背景颜色属性设定一个元素的背景颜色。例如:

BODY { background-color: white }

H1 { background-color: #000080 }

为了避免与用户的样式表之间的冲突，无论任何背景颜色被使用的时候，背景

图像都应该被指定。而大多数情况下，background-image: none都是合适的。网页

制作者也可以使用略写的背景属性，通常会比背景颜色属性获得更好的支持。

（2）background-image属性用于设定标记的背景图片，通常情况下，在标记<

body>中应用，将图片用于整个主体中。

在设定背景图片时，最好同时也设定背景色，这样当背景图片因某种

原因无法正常显示时，可以使用背景色来代替。当然，如果正常显示，

背景图片会覆盖背景色的。

（3）background-repeat属性用于设定背景图片是否重复平铺。该属性有四种属

性值：repeat、repeat-x、repeat-y和no-repeat，默认值为repeat，对属性值的概述如

表4-3所示。

表4-3 background-repeat属性

属性值

repeat

repeat-x

repeat-y

no-repeat

描述

背景图片水平和垂直方向都重复平铺

背景图片水平方向重复平铺

背景图片垂直方向重复平铺

背景图片不重复平铺

background-repeat属性重复背景图片是从元素的左上角开始平铺，直到水平、

垂直或全部页面都被背景图片覆盖。

（4）background-position属性用于指定背景图片在页面中所处的位置。该属性

的属性值可以分为四类：绝对定义位置（length）、百分比定义位置（percentage）、

垂直对齐值和水平对齐值。其中垂直对齐值包括top、center和bottom，水平对齐值

包括left、center和right，如表4-4所示。

表4-4 background-position属性的属性值

属性值

length

percentage

top

center

bottom

left

right

描述

设置图片与边距水平与垂直方向的距离长度，后跟长度单位（cm、mm、px等）

以页面元素框的宽度或高度的百分比放置图片

背景图片顶部居中显示

背景图片居中显示

背景图片底部居中显示

背景图片左部居中显示

背景图片右部居中显示

可以通过如图4-3所示的示意图说明background-position属性值在页面中的相

对位置。

top lefttoptop ritht

top

leftcenter right

center

bottom

left

bottom

bottom

bottom

right

left

center

right

图4-3 background-position属性

从图中可以看出，垂直对齐值还可以与水平对齐值一起使用，从而决定图片的

垂直位置和水平位置。

由于background-position属性是描述背景图片的位置的，所以必须与b

ackground-image属性同时使用，并且background-repeat属性值必须

为no-repeat。

使用垂直对齐值和水平对齐值只能格式化地放置图片，如果在页面中要自由地

定义图片的位置，则需要使用确定数值或百分比。例如，给出如下两条规则：

body {

background-image:url();

background-repeat:no-repeat;

background-position:20% 20%

}

body {

background-image:url();

background-repeat:no-repeat;

background-position:20px 30px

}

第一条规则表示图片的垂直位置与水平位置均相对于页面的20%放置，所以页

面的大小决定了图片所处的位置；第二条规则表示图片的水平距离为20px，垂直距

离为30px，该规则定义了图片的绝对位置。

background-position属性适用于HTML中的块标记及可替换标记，比如

img、input、select等。

（5）background-attachment属性可以实现图片始终在当前可视范围内出现，即

随着滚动条的滚动而发生移动。该属性用来设定背景图片是否随文档一起滚动。该

属性包含两个属性值：scroll和fixed，并适用于所有元素。其中scroll属性值为缺

省值，当页面滚动时，背景图片随页面一起滚动；fixed属性设置背景图片固定在页

面的可见区域里。

使用background-attachment属性，可以使背景图片始终处于视野范围内，以避

免出现因页面的滚动而消失的情况。

一般来说，属性值为fixed是相对于可视范围而言的。无论页面如何滚动，图

片始终处于可视范围之内，而页面中的元素内容则处于滚动状态。

（6）background属性综合了以上所有与背景有关的属性（即以back-ground-开

头的属性），可以一次性地设定背景样式。格式如下：

background:[background-color] [background-image] [background-repeat]

[background-attachment] [background-position]

其中的属性顺序可以自由调换，并且可以选择设定。没有设定的属性，那么系

统会自行为该属性添加缺省值。