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

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

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

background-attachment

值：scroll | fixed | inherit

初始值：scroll

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

繼承性：無

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

background

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

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

background-repeat:no-repeat;

background-position:center;

background-attachment:fixed;}

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

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

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

有意思的效果

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

假設(shè)網(wǎng)頁設(shè)計(jì)員有一個文檔，其中有一個看上去像是平鋪的磚塊背景，還有一個有相同模式的h1元素，只不過顏色不同。body和h1元素都設(shè)置為有固定（fixed）背景，這會得到如圖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：背景的理想對齊

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

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

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

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

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

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

匯總

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

background

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

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

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

繼承性：無

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

計(jì)算值：見單個屬性

因此，以下語句都等價，其效果如圖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è)中對background中值的順序有一個小小的限制：如果background-position有兩個值，它們必須一起出現(xiàn)，而且如果這兩個值是長度或百分?jǐn)?shù)值，則必須按水平值在前垂直值在后的順序。這并不奇怪，不過記住這一點(diǎn)很重要。

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

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

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

body {background:white;}

這是完全合法的，而且在某些方面更為可取，這樣可以減少擊鍵次數(shù)。另外，其效果是所有其他背景屬性都設(shè)置為相應(yīng)的默認(rèn)值，這意味著background-image將會被設(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是一個簡寫屬性，因此，其默認(rèn)值會覆蓋先前為給定元素指定的值。例如：

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

h2{background:silver;}

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

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

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

h2{background-color:silver;}

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

小結(jié)

通過設(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不能向元素的整個內(nèi)容區(qū)應(yīng)用背景），不過背景屬性確實(shí)使用非常廣泛。不難理解它們?yōu)槭裁催@么流行，因?yàn)槔妙伾梢院苋菀椎貐^(qū)分不同的頁面。

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