關聯

現在已經知道，網站建設中可以將背景原圖像放在元素背景上的任何位置，而且可以控制（從某種程度上）它如何平鋪。不過，網站建設人員可能已經認識到了，將一個圖像放在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。這有助于確?？勺x性，防止其他規則（例如，讀者樣式表中的規則）在背景上設置圖像。

以下的所有規則也是合法的，如圖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還提供了更多可能性：可以在任何元素上放置邊框，可以設置額外的外邊距和內邊距，甚至可以“浮動”元素（不只是圖像）。下一章將介紹這些概念