关联

现在已经知道，网站建设中可以将背景原图像放在元素背景上的任何位置，而且可以控制（从某种程度上）它如何平铺。不过，网站建设人员可能已经认识到了，将一个图像放在body元素的中心可能意味着：如果是一个相当长的文档，这个背景图像最开始对读者可能不可见。毕竟，浏览器只是在文档上开了一个窗口。如果文档太长，以至于无法在这个窗口内完全显示，用户可以将文档向前和向后滚动。文档的中心离文档起始点可能相距很远，也许要向下滚动两三"屏"才能看到文档中心（背景图像），或者使得原图像中很大一部分都在浏览器窗口底端之外。

此外，即使网站建设人员认为原图像开始时是可见的，它往往会随文档滚动，而且每次用户滚动如果超过了图像的位置，原图像就会消失。不用担心：有办法防止这种滚动。

background-attachment

值：scroll | fixed | inherit

初始值：scroll

应用于：所有元素

继承性：无

计算值：根据指定确定

background

通过使用属性background-attachment，可以声明原图像相对于可视区是固定的（fixed），因此不会受滚动的影响：

body{background-image:url(bigyinyang.gif)；

background-repeat:no-repeat;

background-position:center;

background-attachment:fixed;}

这样做有两个直接后果，如图9-32所示。首先，原图像不会随文档滚动/其次，原图像的放置由可视区的大小确定，而不是由包含该图像的元素的大小（或在可视区中的位置）决定。

在一个Web浏览器中，随着用户调整浏览器窗口的大小，可视区可能会改变。这会导致背景的原图像随着窗口大小的改变移动位置。图9-33显示了同一个文档的多个视图。所以从某种意义上说，网页设计的图像并不是固定的，它只是在可视区大小不改变的情况下保持固定。

除了fixed，另外只有一个background-attachment值，即默认值scroll。如你所料，在一个Web浏览器中査看文档时，如果background-attachment:值为scroll，会导致背景随其余文档滚动，而且当窗口大小调整时，不一定改变原图像的位置。如果文档宽度是固定的（可能为body元素显式指定了一个宽度），那么可视区大小的调整根本不会影响滚动关联的原图像的放置。

有意思的效果

从技术上讲。如果一个背景图像已经固定（fixed），它会相对于可视区定位，而不是相对于包含该图像的元素定位，不过，背景将只在其包含元素中可见。这带来一个很有意思的后果。

假设网页设计员有一个文档，其中有一个看上去像是平铺的砖块背景，还有一个有相同模式的h1元素，只不过颜色不同。body和h1元素都设置为有固定（fixed）背景，这会得到如图9-34所示的结果：

body(background-image:url(gridl.gif)；

background-repeat:repeat;

background-attachment:fixed;}

h1(background-image:url(grid2.gif)；

background-repeat:repeat;

background-attachment:fixed;)

图9-34：背景的理想对齐

这种理想的对齐是怎么做到的呢？要记住，一个背景如果是固定的（fixed），原元素会根据视窗定位。因此，背景模式都从视窗的左上角开始平铺，而不是从单个元素的左上角开始。对于body，可以看到整个重复模式。不过，对于h1，只是在h1本身的内边距和内容区能看到它的背景。由于两个背景图像大小相同，而且它们有相同的起点，所以看上去就会像图9-34那样“对齐”。

这种功能可以用来创建一些非常复杂的效果。其中最有名的一个例子是"复螺旋变形”演示（hltp://www.meyenveb.com/eric/css/edge/complexspiral/glassy.html），见图9-35所示。

这种视觉效果是通过为非body元素指定不同的固定关联背景图像生成的。整个演示由一个HTML文档，4个JPEG图像和一个样式表驱动。由于所有这4个图像都位于浏览器窗口的左上角，但只是与其元素相交的部分可见，这些图像实际上会交叠，产生一种半透明波纹玻璃的感觉。

图9-35：复螺旋变形

警告：Windows平台的Internet Explorer在IE6以前还不能正确地处理非body元素上的固定关联背景。换句话说，body元素上的固定背景可以得到预想的效果，但其他元素不行。所以，可能得不到如图9-34和图9-35所示的效果。Internet Explorer 7对所有元素都支持固定关联背景。

还有一种情况，对于分页媒体（如打印输出），每个页面都生成自己的视窗。因此，固定关联背景在打印输出的每一页上都应当显示。这可以用于实现某些效果，例如，对文档中的所有页面加水印。对此存在两方面问题：一来使用CSS无法强制打印背景图像，二来并非所有浏览器都能适当地处理固定关联背景的打印。

汇总

与字体属性一样，背景属性可以汇总到一个简写属性：background。这个属性可以从各个其他背景属性取一个值，而且可以采用任何顺序。

background

值：[<background-color>||<background-image>||cbackground-repeat>||<background-attachment>||<background-position>]| inherit

初始值：根据单个属性

应用于：所有元素

继承性：无

百分数：<background-position>允许的值

计算值：见单个属性

因此，以下语句都等价，其效果如图9-36所示：

body{background-color:white;

background-image:url(yinyang.gif);

background-position:top left;

background-repeat:repeat-y;background-attachment:fixed;}

body{background:white urKyinyang.gif}top left repeat-y fixed;}

body{background:fixed urllyinyang.gif}white top left repeat-y;}

body{background:urKyinyang.gif}white repeat-y fixed top left;)

实际上，网站建设中对background中值的顺序有一个小小的限制：如果background-position有两个值，它们必须一起出现，而且如果这两个值是长度或百分数值，则必须按水平值在前垂直值在后的顺序。这并不奇怪，不过记住这一点很重要。

就像所有简写属性一样，如果省略了某些值，就会自动填入相应属性的默认值。因此，以下两个语句是等价的：

body{background:white url(yinyang.gif;}

body{background:white url(yinyang.gif; top left repeat scroll;}更妙的是，background没有必不可少的值——只要至少出现了一个值就行，而省略所有其他属性值。因此，可以使用这个简写属性只设置背景色，这是一个很常用的做法：

body {background:white;}

这是完全合法的，而且在某些方面更为可取，这样可以减少击键次数。另外，其效果是所有其他背景属性都设置为相应的默认值，这意味着background-image将会被设置为none。这有助于确保可读性，防止其他规则（例如，读者样式表中的规则）在背景上设置图像。

以下的所有规则也是合法的，如图9-37所示：

body{background:url(yinyang.gif)bottom left repeat-y;}

h1{background:silver;}

h2{background:url(h2bg.gif)center repeat-x;}

p{background:url(parabg.gif);}

最后网站建设人员要记住一点：background是一个简写属性，因此，其默认值会覆盖先前为给定元素指定的值。例如：

h1,h2{background:gray url(thetrees.jpg)center repeat-x;}

h2{background:silver;}

给定上述规则，h1元素将根据第一个规则设置样式。h2元素则将根据第二个规则设置样式，这意味着它们都将有银色背景。但不会对h2背景应用任何图像，更不用说让背景图像居中和水平重复了。创作人员可能原本想这样做：

图9-37：向一个文档应用多个背景

h1,h2{background:gray url(trees.jpg)center repeat-x;)

h2{background-color:silver;}

这会改变背景色，而不会覆盖所有其他值。

小结

通过设置元素的规色和背景，可以大大增强创作人员的能力。网站建设CSS超越传统方法的优点就在于可以向文档中的任何元素应用颜色和背景，而不只是表单元格或FONT标记中包含的内容。尽管某些实现中存在一些bug（如Navigator 4不能向元素的整个内容区应用背景），不过背景属性确实使用非常广泛。不难理解它们为什么这么流行，因为利用颜色可以很容易地区分不同的页面。

不过，对于如何为元素应用样式，CSS还提供了更多可能性：可以在任何元素上放置边框，可以设置额外的外边距和内边距，甚至可以“浮动”元素（不只是图像）。下一章将介绍这些概念