網(wǎng)頁設(shè)計中的關(guān)聯(lián)

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

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

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

background-attachment

值:scroll | fixed | inherit

初始值:scroll

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

繼承性:無

計算值:根據(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è)計的圖像并不是固定的,它只是在可視區(qū)大小不改變的情況下保持固定。

除了fixed,另外只有一個background-attachment值,即默認值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è)計員有一個文檔,其中有一個看上去像是平鋪的磚塊背景,還有一個有相同模式的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ū)能看到它的背景。由于兩個背景圖像大小相同,而且它們有相同的起點,所以看上去就會像圖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個圖像都位于瀏覽器窗口的左上角,但只是與其元素相交的部分可見,這些圖像實際上會交疊,產(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)顯示。這可以用于實現(xiàn)某些效果,例如,對文檔中的所有頁面加水印。對此存在兩方面問題:一來使用CSS無法強制打印背景圖像,二來并非所有瀏覽器都能適當(dāng)?shù)靥幚砉潭P(guān)聯(lián)背景的打印。

匯總

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

background

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

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

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

繼承性:無

百分數(shù):<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;)

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

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

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)的默認值,這意味著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è)人員要記住一點:background是一個簡寫屬性,因此,其默認值會覆蓋先前為給定元素指定的值。例如:

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ī)色和背景,可以大大增強創(chuàng)作人員的能力。網(wǎng)站建設(shè)CSS超越傳統(tǒng)方法的優(yōu)點就在于可以向文檔中的任何元素應(yīng)用顏色和背景,而不只是表單元格或FONT標(biāo)記中包含的內(nèi)容。盡管某些實現(xiàn)中存在一些bug(如Navigator 4不能向元素的整個內(nèi)容區(qū)應(yīng)用背景),不過背景屬性確實使用非常廣泛。不難理解它們?yōu)槭裁催@么流行,因為利用顏色可以很容易地區(qū)分不同的頁面。

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

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)