10.9　修改文本的背景

可以为单个元素设置背景，或者为整个页面设置背景，还可以为上述二者的任意组合设置背景（参见图10.9.1和图10.9.2）。如此，便可以对几个段落、几个单词、不同状态的链接、内容区域等修改背景。

  1. body {
  2.      background: #eef;
  3.      color: #909;
  4.      font: 100% "Palatino Linotype", Palatino, serif;
  5. }
  6.  
  7. ... [其他CSS] ...
  8.  
  9. /* 目录导航 */
  10. .toc {
  11.      background: #ebc6f9;
  12. }
  13.  
  14. .toc a {
  15.      font-size: .75em;
  16. }

图10.9.1　对body元素设置背景颜色就是为整个页面设置背景颜色。对属于toc类的元素设置背景可以让目录与页面其他内容区分开来（参见图10.9.2）

修改文本背景的步骤

  • 输入background:。

  • 输入transparent（透明）或color，这里的color是颜色名称、十六进制数值，或RGB、HSL、RGBA、HSLA颜色值（参见10.8节）。十六进制值颜色是最为常用的。

  • 如果愿意，输入url(image.gif)以使用图像作为背景，这里的image.gif是图像相对于样式表所在位置的路径和文件名。

如果愿意，输入repeat将图像在横向和纵向重复。输入repeat-x仅横向重复，或输入repeat-y仅纵向重复，或者no-repeat不重复。

如果愿意，输入fixed（固定）或scroll（滚动）以决定背景图是否应该随画布一起滚动（通常不设置此项；如果不设置，则使用默认值scroll）。

如果愿意，输入x y以设置背景图像的位置，其中x和y可以表示为距离左上角的绝对值或百分数。或者用left（左对齐）、center（居中）或right（右对齐）表示x，用top（顶端对齐）、center（居中）或bottom（底端对齐）表示y。

10.9　修改文本的背景 - 图1

图10.9.2　body元素的背景是浅蓝色的，目录的背景则是浅紫色的

提示　可以同时指定背景颜色和背景图像的URL。在图像尚未加载前，或出于某种原因未能加载时，就会使用这个颜色，并且会在图像的透明部分露出这个颜色。如果为元素定义了背景图像，通常一种好的做法是同时为其定义背景颜色，这种颜色要让文字颜色和背景具有足够的对比度。这样做就能确保在背景图像被用户关闭或因为某种原因未能加载时文字依然具有可读性。如果不显式地定义背景颜色，该元素就会继承其父元素的颜色，如body元素默认的白色背景。如果你想在深色背景图像上显示浅色文字，就有可能产生问题。更多细节参见“更多关于背景的说明”。

　

提示　背景和前景之间应有足够的对比度，从而让访问者能够轻松地阅读文字。这样做不仅能帮助普通用户，而且对可访问性来说也是很重要的。对比度对色盲访问者来说尤其重要。

　

提示　background属性不是继承的。

　

多重背景及更多的CSS3特性

CSS3引入了几个新的背景相关的特性，包括期待已久的多重背景、背景缩放等。其中的一些可以在第14章学到。如果要深入了解相关CSS3模块中的所有这些特征，参见www.w3.org/TR/css3-background/。

　

更多关于背景的说明

background属性非常强大，你会发现很多需要用上它的场合。容易想到的是你可能对本节中的第3步仍有些许疑惑。

下面是一个例子：

  1. body {
  2.   background: #foc url(bg-page.png) repeat-x scroll 0 0;
  3. }

这实际上是一种简记法，就像使用font属性将font-family、font-size、line-height等属性组合在一条声明里一样。

从左至右对background简记法进行分解，可以重新写为：

  1. body {
  2.   background-color: #foc;
  3.   background-image: url(bg-page.png);
  4.   background-repeat: repeat-x;
  5.   background-attachment: scroll;
  6.   background-position: 0 0;
  7. }

这样做代码量就变大了，因此，很容易理解为什么应该使用简记法，除非有理由分开书写。实际上，甚至还可以将scroll和0 0去掉，让示例变得更短一些。

  1. body {
  2.   background: #foc url(bg-page.png) repeat-x;
  3. }

实践中，URL可能是类似于../img/bg-page.png的形式，因为我们通常不希望将图像与样式表保存在同一目录。

那么，这代表什么呢？设想背景图像bg-page.png是一个15像素宽、600像素高的重复图案。示例样式规则表示：“在水平方向无限重复这个图像，在任何没有图像的地方无限使用#foc颜色。”这样，就会看见图像在纵向前600像素的区域平铺开来。如果内容的高度大于600像素，就会看见#foc颜色（粉红色，很适合用于Hello Kitty礼品站）。

背景图像应该很好地与背景颜色融合，以免访问者在图像与颜色交接处看到一条明显的线。由于background是为body定义的，因此所有的页面内容都覆盖在背景图像与背景颜色上。如果你研究一下其他网站的CSS，很容易发现为body设置的background的一些变化。

下面给出了更多的例子，介绍了一些可能的处理方式。

黑色的背景颜色，结合在纵向上无限重复显示的图像。

  1. body {
  2.   background: #000 url(../../image/bg-page.png) repeat-y;
  3. }

在所有方向无限重复显示的背景图像。在图像未能加载时，或在图像加载之前，显示黄色。

  1. body {
  2.   background: yellow url(../img/bg-smiley-faces.png);
  3. }

深绿色的背景颜色，结合不重复显示且定位于距页面左边缘200像素、距上边缘125像素的图像。允许使用负数。使用center可以让它相对页面居中。

  1. body {
  2.   background: #3f8916 url(../../img/bg-gumby.png) no-repeat 200px 125px;
  3. }

上面的介绍集中于body背景，这是因为它们对页面的设计有着极大的影响。实际上，可以将background属性应用于任何元素。因此，如果你愿意，完全可以将Telly Savalas的照片设为所有段落的背景。我鼓励你这样做。