關(guān)聯(lián)

現(xiàn)在已經(jīng)知道，網(wǎng)站建設(shè)中可以將背景原圖像放在元素背景上的任何位置，而且可以控制（從某種程度上）它如何平鋪。不過(guò)，網(wǎng)站建設(shè)人員可能已經(jīng)認(rèn)識(shí)到了，將一個(gè)圖像放在body元素的中心可能意味著：如果是一個(gè)相當(dāng)長(zhǎng)的文檔，這個(gè)背景圖像最開(kāi)始對(duì)讀者可能不可見(jiàn)。畢竟，瀏覽器只是在文檔上開(kāi)了一個(gè)窗口。如果文檔太長(zhǎng)，以至于無(wú)法在這個(gè)窗口內(nèi)完全顯示，用戶可以將文檔向前和向后滾動(dòng)。文檔的中心離文檔起始點(diǎn)可能相距很遠(yuǎn)，也許要向下滾動(dòng)兩三"屏"才能看到文檔中心（背景圖像），或者使得原圖像中很大一部分都在瀏覽器窗口底端之外。

此外，即使網(wǎng)站建設(shè)人員認(rèn)為原圖像開(kāi)始時(shí)是可見(jiàn)的，它往往會(huì)隨文檔滾動(dòng)，而且每次用戶滾動(dòng)如果超過(guò)了圖像的位置，原圖像就會(huì)消失。不用擔(dān)心：有辦法防止這種滾動(dòng)。

background-attachment

值：scroll | fixed | inherit

初始值：scroll

應(yīng)用于：所有元素

繼承性：無(wú)

計(jì)算值：根據(jù)指定確定

background

通過(guò)使用屬性background-attachment，可以聲明原圖像相對(duì)于可視區(qū)是固定的（fixed），因此不會(huì)受滾動(dòng)的影響：

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

background-repeat:no-repeat;

background-position:center;

background-attachment:fixed;}

這樣做有兩個(gè)直接后果，如圖9-32所示。首先，原圖像不會(huì)隨文檔滾動(dòng)/其次，原圖像的放置由可視區(qū)的大小確定，而不是由包含該圖像的元素的大小（或在可視區(qū)中的位置）決定。

在一個(gè)Web瀏覽器中，隨著用戶調(diào)整瀏覽器窗口的大小，可視區(qū)可能會(huì)改變。這會(huì)導(dǎo)致背景的原圖像隨著窗口大小的改變移動(dòng)位置。圖9-33顯示了同一個(gè)文檔的多個(gè)視圖。所以從某種意義上說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)的圖像并不是固定的，它只是在可視區(qū)大小不改變的情況下保持固定。

除了fixed，另外只有一個(gè)background-attachment值，即默認(rèn)值scroll。如你所料，在一個(gè)Web瀏覽器中査看文檔時(shí)，如果background-attachment:值為scroll，會(huì)導(dǎo)致背景隨其余文檔滾動(dòng)，而且當(dāng)窗口大小調(diào)整時(shí)，不一定改變?cè)瓐D像的位置。如果文檔寬度是固定的（可能為body元素顯式指定了一個(gè)寬度），那么可視區(qū)大小的調(diào)整根本不會(huì)影響滾動(dòng)關(guān)聯(lián)的原圖像的放置。

有意思的效果

從技術(shù)上講。如果一個(gè)背景圖像已經(jīng)固定（fixed），它會(huì)相對(duì)于可視區(qū)定位，而不是相對(duì)于包含該圖像的元素定位，不過(guò)，背景將只在其包含元素中可見(jiàn)。這帶來(lái)一個(gè)很有意思的后果。

假設(shè)網(wǎng)頁(yè)設(shè)計(jì)員有一個(gè)文檔，其中有一個(gè)看上去像是平鋪的磚塊背景，還有一個(gè)有相同模式的h1元素，只不過(guò)顏色不同。body和h1元素都設(shè)置為有固定（fixed）背景，這會(huì)得到如圖9-34所示的結(jié)果：

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：背景的理想對(duì)齊

這種理想的對(duì)齊是怎么做到的呢？要記住，一個(gè)背景如果是固定的（fixed），原元素會(huì)根據(jù)視窗定位。因此，背景模式都從視窗的左上角開(kāi)始平鋪，而不是從單個(gè)元素的左上角開(kāi)始。對(duì)于body，可以看到整個(gè)重復(fù)模式。不過(guò)，對(duì)于h1，只是在h1本身的內(nèi)邊距和內(nèi)容區(qū)能看到它的背景。由于兩個(gè)背景圖像大小相同，而且它們有相同的起點(diǎn)，所以看上去就會(huì)像圖9-34那樣“對(duì)齊”。

這種功能可以用來(lái)創(chuàng)建一些非常復(fù)雜的效果。其中最有名的一個(gè)例子是"復(fù)螺旋變形”演示（hltp://www.meyenveb.com/eric/css/edge/complexspiral/glassy.html），見(jiàn)圖9-35所示。

這種視覺(jué)效果是通過(guò)為非body元素指定不同的固定關(guān)聯(lián)背景圖像生成的。整個(gè)演示由一個(gè)HTML文檔，4個(gè)JPEG圖像和一個(gè)樣式表驅(qū)動(dòng)。由于所有這4個(gè)圖像都位于瀏覽器窗口的左上角，但只是與其元素相交的部分可見(jiàn)，這些圖像實(shí)際上會(huì)交疊，產(chǎn)生一種半透明波紋玻璃的感覺(jué)。

圖9-35：復(fù)螺旋變形

警告：Windows平臺(tái)的Internet Explorer在IE6以前還不能正確地處理非body元素上的固定關(guān)聯(lián)背景。換句話說(shuō)，body元素上的固定背景可以得到預(yù)想的效果，但其他元素不行。所以，可能得不到如圖9-34和圖9-35所示的效果。Internet Explorer 7對(duì)所有元素都支持固定關(guān)聯(lián)背景。

還有一種情況，對(duì)于分頁(yè)媒體（如打印輸出），每個(gè)頁(yè)面都生成自己的視窗。因此，固定關(guān)聯(lián)背景在打印輸出的每一頁(yè)上都應(yīng)當(dāng)顯示。這可以用于實(shí)現(xiàn)某些效果，例如，對(duì)文檔中的所有頁(yè)面加水印。對(duì)此存在兩方面問(wèn)題：一來(lái)使用CSS無(wú)法強(qiáng)制打印背景圖像，二來(lái)并非所有瀏覽器都能適當(dāng)?shù)靥幚砉潭P(guān)聯(lián)背景的打印。

匯總

與字體屬性一樣，背景屬性可以匯總到一個(gè)簡(jiǎn)寫(xiě)屬性：background。這個(gè)屬性可以從各個(gè)其他背景屬性取一個(gè)值，而且可以采用任何順序。

background

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

初始值：根據(jù)單個(gè)屬性

應(yīng)用于：所有元素

繼承性：無(wú)

百分?jǐn)?shù)：<background-position>允許的值

計(jì)算值：見(jiàn)單個(gè)屬性

因此，以下語(yǔ)句都等價(jià)，其效果如圖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;)

實(shí)際上，網(wǎng)站建設(shè)中對(duì)background中值的順序有一個(gè)小小的限制：如果background-position有兩個(gè)值，它們必須一起出現(xiàn)，而且如果這兩個(gè)值是長(zhǎng)度或百分?jǐn)?shù)值，則必須按水平值在前垂直值在后的順序。這并不奇怪，不過(guò)記住這一點(diǎn)很重要。

就像所有簡(jiǎn)寫(xiě)屬性一樣，如果省略了某些值，就會(huì)自動(dòng)填入相應(yīng)屬性的默認(rèn)值。因此，以下兩個(gè)語(yǔ)句是等價(jià)的：

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

body{background:white url(yinyang.gif; top left repeat scroll;}更妙的是，background沒(méi)有必不可少的值——只要至少出現(xiàn)了一個(gè)值就行，而省略所有其他屬性值。因此，可以使用這個(gè)簡(jiǎn)寫(xiě)屬性只設(shè)置背景色，這是一個(gè)很常用的做法：

body {background:white;}

這是完全合法的，而且在某些方面更為可取，這樣可以減少擊鍵次數(shù)。另外，其效果是所有其他背景屬性都設(shè)置為相應(yīng)的默認(rèn)值，這意味著background-image將會(huì)被設(shè)置為none。這有助于確?？勺x性，防止其他規(guī)則（例如，讀者樣式表中的規(guī)則）在背景上設(shè)置圖像。

以下的所有規(guī)則也是合法的，如圖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);}

最后網(wǎng)站建設(shè)人員要記住一點(diǎn)：background是一個(gè)簡(jiǎn)寫(xiě)屬性，因此，其默認(rèn)值會(huì)覆蓋先前為給定元素指定的值。例如：

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

h2{background:silver;}

給定上述規(guī)則，h1元素將根據(jù)第一個(gè)規(guī)則設(shè)置樣式。h2元素則將根據(jù)第二個(gè)規(guī)則設(shè)置樣式，這意味著它們都將有銀色背景。但不會(huì)對(duì)h2背景應(yīng)用任何圖像，更不用說(shuō)讓背景圖像居中和水平重復(fù)了。創(chuàng)作人員可能原本想這樣做：

圖9-37：向一個(gè)文檔應(yīng)用多個(gè)背景

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

h2{background-color:silver;}

這會(huì)改變背景色，而不會(huì)覆蓋所有其他值。

小結(jié)

通過(guò)設(shè)置元素的規(guī)色和背景，可以大大增強(qiáng)創(chuàng)作人員的能力。網(wǎng)站建設(shè)CSS超越傳統(tǒng)方法的優(yōu)點(diǎn)就在于可以向文檔中的任何元素應(yīng)用顏色和背景，而不只是表單元格或FONT標(biāo)記中包含的內(nèi)容。盡管某些實(shí)現(xiàn)中存在一些bug（如Navigator 4不能向元素的整個(gè)內(nèi)容區(qū)應(yīng)用背景），不過(guò)背景屬性確實(shí)使用非常廣泛。不難理解它們?yōu)槭裁催@么流行，因?yàn)槔妙伾梢院苋菀椎貐^(qū)分不同的頁(yè)面。

不過(guò)，對(duì)于如何為元素應(yīng)用樣式，CSS還提供了更多可能性：可以在任何元素上放置邊框，可以設(shè)置額外的外邊距和內(nèi)邊距，甚至可以“浮動(dòng)”元素（不只是圖像）。下一章將介紹這些概念