5.10日(rì)音(yīn)訊,輕松玩(wán)轉®§CSS背景。背景(background)是(shì™σ¥β)css中一(yī)個(gè)重要(yào)的(de)的(de)部分(fēn×↔★)，也(yě)是(shì)需要(yào)知(zhī)道(dào)的εσ" (de)css的(de)基礎知(zhī)識之一(yī)。這(zhè)篇文(wé"±n)章(zhāng)将會(huì)涉及css背景(background)α←Ω¥的(de)基本用(yòng)法，包括諸如(rú)₽₽background-attachmen→λt等的(de)屬性，也(yě)會(huì)介紹一(yī)些(xi<∞≈πē)有(yǒu)關背景(background)的(dπ×✘e)常用(yòng)技(jì)巧，以及css3中的(de)背景(backg¥∞round)(包含4個(gè)新的(de)背景(backgr§>αound)屬性)。
css2中的(de)背景(background)
概述
CSS2中有(yǒu)5個(gè)主要(y₹γ₩ào)的(de)背景(backgroun★↑d)屬性，它們是(shì)：
*background-color:指定填充背景的(de)顔色。
*background-image:引用 ×(yòng)圖片作(zuò)為(wèi)背景。
*background-position:指 "定元素背景圖片的(de)位置。
*background-repeat:決定是(shì)否重複背"✔≈✔景圖片。
*background-attachment:決定背景圖是(shì)★€↓÷否随頁面滾動。
這(zhè)些(xiē)屬性可(k"♣ě)以全部合并為(wèi)一(yī)個(gè)縮寫屬性:ba∞ ↑ckground。需要(yào)注意的(de)一(£¥yī)個(gè)要(yào)點是(shìλ← )背景占據元素的(de)所有(yǒu)內(nèi)容區(qū)域，包括pad≈≤ding和(hé)border，但(dàn)是(sh✘¶$>ì)不(bù)包括元素的(de)margin。它在Firefox,↔≥Safari,Opera以及IE8中工(gōng)作(zuò)正常，₽± 但(dàn)是(shì)IE6和(hé)IE≤α÷£7中，background沒把border計(jì)算(suàn)在內§≤☆(nèi)。
基本屬性
背景色(background-colo$≥λr)
background-color屬性 ≈∑用(yòng)純色來(lái)填充背景。有(yǒu)→↑♣許多(duō)方式指定這(zhè)個(gè)顔色，以下(xià)∏×方式都(dōu)得(de)到(dào)相(xiàng)同的(×<§de)結果。
background-color:bl↑₩ε≈ue;
background-color:rgb(0,0,255±'✘↑);
background-color:# 0000ff;
background-color也®≈(yě)可(kě)被設置為(wèi)透明(míng)（tran™←sparent），這(zhè)會(huì)使得(de)其下(xià)的(d€φe)元素可(kě)見(jiàn)。
背景圖(background-image)
background-image屬性δσ允許指定一(yī)個(gè)圖片展示在背景中。可(kě)以和(hé)£>background-color連用(yòng)，因此如(rú)果圖片不✘β(bù)重複地(dì)話(huà)，圖片覆蓋不(bù)到(d£ ©ào)地(dì)地(dì)方都(dōu)會(hu§£ì)被背景色填充。代碼很(hěn)簡單，'©隻需要(yào)記住，路(lù)徑是(shì)相(xiàng)對™&≠∏(duì)于樣式表的(de)，因此以下(xià)的(de)代碼中，圖片₹♠ε和(hé)樣式表是(shì)在同一(yī)個(gè)目錄中的÷σ↓(de)。
background-image:url(im↔∏age.jpg);
但(dàn)是(shì)如(rú)€ ←果圖片在一(yī)個(gè)名為(wèi)im✘<ages的(de)子(zǐ)目錄中，就(jγ©• iù)應該是(shì)：
background-image:url(im© ™ages/image.jpg);
糖伴西(xī)紅(hóng)柿：使用(yòng)../表示→ε≠上(shàng)一(yī)級目錄，比如(rú)b♣₩≤>ackground-image:url(../images/image.j↔ ♥pg);表示圖片位于樣式表的(de)上(shàng)級目錄中的(≠☆de)images子(zǐ)目錄中。有(yǒu)點繞，不(bù)過這γ₹↓±(zhè)個(gè)大(dà)家(jiā)↓∏£≠應該都(dōu)知(zhī)道(dào)了(le)，我→→σΩ就(jiù)不(bù)詳說(shuō)了(le)。前端觀察版權所有(y®ǒu)，轉載請(qǐng)保留鏈接。
背景平鋪(background-r∑£epeat)
設置背景圖片時(shí)，默認把圖片在水(shuǐ)平和(h♣↓βé)垂直方向平鋪以鋪滿整個(gè)元素。這(zhè)也(yě)許是(shì✔₹↓>)你(nǐ)需要(yào)的(de)，但(dàσ§∞n)是(shì)有(yǒu)時(shí)會(huì)希望圖"→¶δ片隻出現(xiàn)一(yī)次，或者隻在一(yī)個(gè→∏∏≤)方向平鋪。以下(xià)為(wèi)可(kě)能(Ωα✘néng)的(de)設置值和(hé)結果₩φ：
background-repeat:repeat;/*默認值，在水(shγ± βuǐ)平和(hé)垂直方向平鋪*/
background-repeat:no-repeat;×'≠σ/*不(bù)平鋪。圖片隻展示一(yī)次。*/
background-repeat:repea≈β×t-x;/*水(shuǐ)平方向平鋪(沿x軸)*/
background-repeat:r £epeat-y;/*垂直方向平鋪(沿y軸 ×)*/
background-repeat:inheγβπλrit;/*繼承父元素的(de)backgrounβ∞λ¥d-repeat屬性*/
背景定位(background-position)
background-positionΩ≤"屬性用(yòng)來(lái)控制(zhì)背景圖片在≈₩♣元素中的(de)位置。技(jì)巧是(s↔≥₹hì)，實際上(shàng)指定的(de)是(shì)≥<α≤圖片左上(shàng)角相(xiàng)對(duì)于元素左上(shε<àng)角的(de)位置。
下(xià)面的(de)例子(zǐ)λ¶↔中，設置了(le)一(yī)個(gè)背景圖片并且用(yò≥®ng)background-position屬性來(lái)控制(zhì)它π™的(de)位置，同時(shí)也(yě)設λ€λ置了(le)background-repeat為(wèi)no-re™βpeat。計(jì)量單位是(shì)像素。第一(yī)個↓(gè)數(shù)字表示x軸(水(shuǐ)平)位₽®置，第二個(gè)是(shì)y軸(垂直)>¥π位置。
/*例1:默認值*/
background-position:00≤™±;/*元素的(de)左上(shàng)角*/
/*例2:把圖片向右移動*/
background-positio♣βn:75px0;
/*例3:把圖片向左移動*/
background-positio✘€™×n:-75px0;
/*例4:把圖片向下(xià)移動*/
background-position↕σ®:0100px;
background-positio↓'©≈n屬性可(kě)以用(yòng)其它數(sh♦<™ù)值，關鍵詞和(hé)百分(fēn)比來(lái)指定，這(£©≥&zhè)比較有(yǒu)用(yòng)，尤其是(shì)在元素↔¶尺寸不(bù)是(shì)用(yòng)β✘×像素設置時(shí)。
關鍵詞是(shì)不(bù)用(yòng)解釋的(de)。x軸上(↓'εshàng)：
*left
*center
*right
y軸上(shàng):
*top
*center
*bottom
順序方面和(hé)使用(yòng)$♠像素值時(shí)的(de)順序幾乎一(yī)樣，首先是(s→δ↕ hì)x軸，其次是(shì)y軸，像這(z♠α♥hè)樣：
background-position:topr↕✘§ight;
使用(yòng)百分(fēn)數(shù)時(sλ∑hí)也(yě)類似。需要(yào)主要(y✘↕≤ào)的(de)是(shì)，使用(yòn♥∑g)百分(fēn)數(shù)時(shí)，浏覽器(qì)是(shì)以元素£↕ ©的(de)百分(fēn)比數(shù)值來♦™£(lái)設置圖片的(de)位置的(de)。看(kàn)例子Ω♠±(zǐ)就(jiù)好(hǎo)理(lǐ)解了(γ≈le)。假設設定如(rú)下(xià)：
background-position:10♥↑0%50%;
Thisgoes100%ofthewayacrosstheimageγ♦'↕(i.e.theveryright-handedge)and100%Ω∏ ofthewayacrosstheele"≈♦"ment(remember,thestartingpointisa←φlwaysthetop-leftcorn'Ω¥≤er),andthetwolineupthere.Itth↔↑₹"engoes50%ofthewaydown"↓theimageand50%ofthew↕λaydowntheelementtolineup£•there.Theresultisthatthe↕♦βimageisalignedtotherightε<oftheelementandexactlyhalf-waydownit↓™.
使用(yòng)百分(fēn)數(s≥•hù)定位時(shí)，其實是(shì)将背景圖片的(de)百分(fēn)比♠↑σ±指定的(de)位置和(hé)元素的(de)百分(fē←≤n)比位置對(duì)齊。也(yě)就(jiù)是(shì)說(shuō<₹✘)，百分(fēn)數(shù)定位是(shì)改變了(le)背景σ≠™×圖和(hé)元素的(de)對(duì)齊基點<δ₩。不(bù)再像使用(yòng)像素和(hé)關鍵詞定位時(shí)，使✘€≤≥用(yòng)背景圖和(hé)元素的(de)左上(shàng)角為₽$✘(wèi)對(duì)齊基點。例如(rú)上(shàng)例的(de)ba₩•★ckground-position:100%50%↕π;就(jiù)是(shì)将背景圖片的(de)100%(right)50%≈★¥ε(center)這(zhè)個(gè)點，和(hé)元素π ★✔的(de)100%(right)50%(center)這¥¶(zhè)個(gè)點對(duì)齊。
這(zhè)再一(yī)次說(shuō)明( ♣∑€míng)了(le)，我們一(yī)直認為(wèi)已經掌握的(de)簡單的☆γ (de)東(dōng)西(xī)，其實還(hái)有'←♠ (yǒu)我們有(yǒu)限的(de)認知(zhī)之•ε外(wài)的(de)知(zhī)識。
注意原點總是(shì)左上(shàng)角，最終的(de)₹&效果是(shì)笑(xiào)臉圖片被定位在元素的(de)>&↑最右邊，離(lí)元素頂部是(shì)元素的(de)一(yī)半，效果和(hé←★ •)background-position:rightcenter;一(yī)樣φ↔±。
背景附著(zhe)
background-attachmeπα®λnt屬性決定用(yòng)戶滾動頁面時(shí)圖片的(de)狀态。三個≈↑©¥(gè)可(kě)用(yòng)屬性為(wèi)scroll☆≠&↕(滾動)，fixed(固定)和(hé)inheri"Ω$t(繼承)。inherit單純地(dì)> 指定元素繼承他(tā)的(de)父元素的(de)backg☆→↔<round-attachment屬性。
為(wèi)了(le)正确地(dì)理(lǐ↔ )解background-attachment，首先需要(yào)明(mínπ÷g)白(bái)頁面(page)和(hé)視(shì)口(≈∑viewport)是(shì)如(rú)何協作(zuò)地(dì)"☆。視(shì)口(viewport)是(shì)浏覽器(qì)顯示網頁的•♦φ (de)部分(fēn)(就(jiù)是(shì)去(qù)↔'∏₹掉工(gōng)具欄的(de)浏覽器(q<±$ì))。視(shì)口(viewport)的(de)απε位置固定，不(bù)變動。
當向下(xià)滾動網頁時(shí←₹ ≤)，視(shì)口(viewport)是(shì)不(bù♣₩Ω)動的(de)，而頁面的(de)內(nèi≈>$)容向上(shàng)滾動。看(kàn)✔∞✔↓起來(lái)貌似視(shì)口(viewport)向頁✘®"面下(xià)方滾動了(le)。如(rú)果設置b∏¥®ackground-attachment:™ scroll，就(jiù)設置了(le)當元素滾 β動時(shí)，元素背景也(yě)必需随著(zhe)滾動。簡而言¶≈₩☆之，背景是(shì)緊貼元素的(de)。這(zhè→♥)是(shì)background-attachment默認值。
用(yòng)一(yī)個(gè)例子(z₩£§≈ǐ)來(lái)更清楚地(dì)描述下(x <₹ià)：
background-image:url(test-image.₩£jpg);
background-positio±←n:00;
background-repeat:n×o-repeat;
background-attachment:scroll;
當向下(xià)滾動頁面時(shí)，♥₹¶背景向上(shàng)滾動直至消失。
但(dàn)是(shì)當設置backgrouφ©¥ nd-attachment為(wèi)fixed時(shí)，當頁面向下α (xià)滾動時(shí)，背景要(yào)待在它原來(lái)的(de)位≠♦∑置(相(xiàng)對(duì)于浏覽器(qì)來(lá×≥€✘i)說(shuō))。也(yě)就(jiù)是(shì)不(bù)随★✔™元素滾動。
用(yòng)另一(yī)個(gè)例子(zǐβ₩)描述下(xià)：
background-image:url(test-im"↑age.jpg);
background-position:0100%;
background-repeat:no-repeat;
background-attachment$×ε≥:fixed;
頁面已經向下(xià)滾動了(le)，但(dàn)是(shì)圖像仍∑∑¥≥然保持可(kě)見(jiàn)。
需要(yào)重視(shì)的(de)一(yī)點是(shì)背景←£♠ 圖隻能(néng)出現(xiàn)在它父元素能(≈π♥Ωnéng)達到(dào)的(de)區(qū)域。♠♠₽即使圖片是(shì)相(xiàng)對(duì)于視(shì)口(viewpo€≥∏rt)定位地(dì)，如(rú)果它的(de)父元£♦ 素不(bù)可(kě)見(jiàn)，圖片就(jiù)會(huì)↓£✔φ消失。參見(jiàn)下(xià)面的(de)例子(zǐ)。此例中，×圖片位于視(shì)口(viewport)∏₹≤的(de)左下(xià)方，但(dàn)是(shì)隻有(>←λyǒu)元素內(nèi)的(de)圖片部分(fēn)是(shì)£★可(kě)見(jiàn)的(de)。
background-image:url(t€δ∑est-image.jpg);
background-positiγ§on:0100%;
background-repeat:no-repeat;
background-attachment:fix"≠ed;
因為(wèi)圖片開(kāi)始在元素之外(w>♠ài)，一(yī)部分(fēn)圖片被切除了(lπ↕e)。
背景的(de)簡寫屬性
可(kě)以把背景的(de)各個(gè)屬性合為(wèi)®≈&♣一(yī)行(xíng)，而不(bù)用(yòng)✘™≈每次都(dōu)單獨把他(tā)們寫出來(lái)。格式如(∏ ∑rú)下(xià)：
background:<color>&a✔♣≥mp;lt;image><position&™✔∑";gt;<attachment&am'≠p;gt;<repeat>→↓
例如(rú)，下(xià)面的(de)聲明(míng)
background-color:↑•transparent;
background-image:urlγ×δ↔(image.jpg);
background-position:50%0;
background-attachment:scroll;
background-repeat:rep©∑§↕eat-y;
可(kě)以合為(wèi)單獨一(y₹∏→±ī)行(xíng)：
background:transparen✘♠turl(image.jpg)50%0scrollrepeat-y;☆λ
而且不(bù)需要(yào)指定每一(yī)個♣σ♥(gè)值。如(rú)果省略值地(dì)話(huà)，σ₹→就(jiù)使用(yòng)屬性地(dì)默認值。例如(rú)，上(shàng)面那(nà)行(xíng)和(hé)下(xià)面♥β☆這(zhè)個(gè)效果一(yī)樣：
background:url(image.γγσjpg)50%0repeat-y;
背景的(de)一(yī)般用(yòng)法γ♣↕π
除了(le)可(kě)以用(yòng)來(lái)γ→€α使元素更加優雅這(zhè)類顯然的(de)用(yòng)法之♠&♥>外(wài)，背景也(yě)可(kě)以用☆♠§÷(yòng)于其它的(de)目的(de)。
仿欄
當使用(yòng)css的(de)'ε float屬性來(lái)定位布局元素時(Ω•shí)，要(yào)确保兩欄或多(duō)欄有(yǒu)相(xiàng)同的↓✘≥(de)長(cháng)度是(shì)比較困難的(de)。如(rú)果長≥™¶(cháng)度不(bù)同，其中一(yī)欄的( ₹de)背景會(huì)比另外(wài)的(de)α↓"短(duǎn)，這(zhè)會(huì)破壞整個(gè)設計(jαì)。
仿欄是(shì)個(gè)非常簡單的(d♥←♣₩e)背景技(jì)巧，這(zhè)個(gè)技(↓≈♥jì)巧最早發表在AListApart。思路(lù)很¶∞(hěn)簡單：不(bù)再給每列單獨設置背景，而是(shì)給各列的(de₩<)父元素設置一(yī)個(gè)背景圖。所有(yǒu$δ')欄的(de)設計(jì)都(dōu)包含在這(zhè)張圖片之中。
文(wén)本替換
在網頁上(shàng)，對(duì)于字體(tǐ)的(© ✔de)選擇是(shì)相(xiàng)當有(yǒu×γβ)限的(de)。可(kě)以使用(yòng)sIFR之類的(de)工(gō∏βng)具來(lái)定制(zhì)字體(tǐ)，但(dàn)是(shì)這(∑δ₽✔zhè)需要(yào)用(yòng)戶啓用(yòn©§g)JavaScript。一(yī)個(gè)适用(yòng)于任意浏覽器♥βφ"(qì)的(de)簡單方法是(shì)，用(yòng)想用(yòng)的(λ✘λ×de)字體(tǐ)來(lái)做(zuò)一(yī)張文β♦✔(wén)本圖片，并用(yòng)這(zhè)張圖片作("σ$zuò)為(wèi)背景。這(zhè)樣，文(wén)δ♦↓♣本依然出現(xiàn)在文(wén)檔标記中以供搜索引擎檢索和(hé)屏幕¥♣♣♥浏覽器(qì)識别，但(dàn)是(shì)在浏覽器(qì)中β✘↔就(jiù)會(huì)顯示首選的(de)字體(tǐ)。
例如(rú)，HTML标記可(kě)能(néσ™§ng)是(shì)這(zhè)樣的(de)：✘₩™
<h3>Blogroll'£</h3>
假如(rú)有(yǒu)一(yī)個(gè)200乘75的(de)圖片，" 上(shàng)面有(yǒu)更好(hǎo)看(kàn)的(de)字體(☆×≈÷tǐ)，就(jiù)可(kě)以用(yòng)如(rú)下(xi←§à)方式來(lái)替換文(wén)本：
h3.blogroll{
width:200px;
height:75px;/*Sot≠hattheelementwillshowthewholeΩ♣"image.*/
background:url(blogroll-text.jpg)✔♠00no-repeat;/*Setsthebackgroundimage*πε/
text-indent:-9999px;/*Hidesth×✘★↔eregulartextbymovingit9999pixelstot≤∑heleft*/
}
簡單的(de)圓點
無需列表中的(de)圓點看(kàn)起來(lái)很(hěn)難看(kà✘$n)。不(bù)用(yòng)再處理(lǐ)所有(yǒu) γ不(bù)同的(de)list-style屬性，隻需要(£→yào)簡單地(dì)把他(tā)們隐藏并用(yòng)背景★λ₹β圖代替就(jiù)可(kě)以了(le)。因為(wèi)圖片←™∑可(kě)以随意選擇，這(zhè)些(xiē)圓點就(jiù)★¥₹λ可(kě)以看(kàn)起來(lái)更漂亮(l♥✘iàng)。
下(xià)面，我們把一(yī)個(gè)無需列表改造成有(yǒu≈$$)圓滑圓點的(de)：
ul{
list-style:none;/*Removesdefauσ$§ltbullets.*/
}
ulli{
padding-left:40px;/*Indent✔∑→£slistitems,leavingroomforbackgroundimaβγgeontheleft.*/
background:url(bulletpoint.jpg)00♣ φ₹no-repeat;
}
CSS3中的(de)背景
CSS3中的(de)背景有(yǒu)較多(duō)改進。'₽最顯著的(de)是(shì)多(duō)背景✘↓δ圖片的(de)選項，同時(shí)也(yě)增加了(le)4個∑β¥(gè)新屬性。
多(duō)背景
CSS3中，可(kě)以對(duì)一(yī✘<ε)個(gè)元素應用(yòng)一(yī)個(gè)或多(du∑∞γō)個(gè)圖片作(zuò)為(wèi)背景。代碼和(hé)css2中的(d₽↑✔©e)一(yī)樣，隻需要(yào)用(yòng÷±↕÷)逗号來(lái)區(qū)别各個(gè)圖片。第וσ一(yī)個(gè)聲明(míng)的(de)圖片↔Ω定位在元素頂部，其它的(de)圖片按序在其下(xià)排列×★&∞，例如(rú)：
background-image:url(top-im∞₹¶₹age.jpg),url(middle-image.jpg),url(§®αbottom-image.jpg);
新屬性：背景修剪(backgroun★♥∏d-clip)
這(zhè)又(yòu)把我們帶回了(le)文(wén)章€₹★(zhāng)開(kāi)始討(tǎo)論的(de)"₽≤那(nà)個(gè)關于邊框內(nèi)圖片顯示的(de)話(huà)題。它β✔≥↕被描述為(wèi)“背景描繪區(qū)✔$$✘”。
background-clip屬性用β∑(yòng)來(lái)增強背景顯示位置的(de)控制(zh∑&ì)能(néng)力。可(kě)能(néng)的(de)值為(wèi)：
*background-clip:border-box;
背景顯示在邊框內(nèi)。
*background-clip:p™δadding-box;
背景顯示在內(nèi)補白(bái♥)(padding)內(nèi)，而不(bù)是(shì₹φ)邊框內(nèi)。
*background-clip:content-®©box;
隻在內(nèi)容內(nèi)顯示背景，而不(bù)是(shì)內↕ ¥•(nèi)補白(bái)(padding)和(hé)邊框內(nèi)≠®♠♠。
*background-clip:no-clip;
默認值，和(hé)border-box一(yī)樣。≈§<
新屬性：背景原點(background-origin)
這(zhè)個(gè)屬性和(hé)backg☆≥round-position結合起來(lái)使用(yòng)。可¥γ±•(kě)以從(cóng)邊框，內(nèi★∑♠)補白(bái)或者內(nèi)容盒子(zǐ)開(kāi)始計(j☆ε∏ì)算(suàn)background-position(類→Ω似于background-clip)。
*background-origin:border-₽£box;
以邊框為(wèi)原點開(kāi)始計(jì)算(suàn)backg'÷round-position.
*background-origin:padding-bo§∏≤φx;
以內(nèi)補白(bái)為(wèi)原點開(©≠kāi)始計(jì)算(suàn)bac<ε>kground-position
*background-origin:conte®™←nt-box;
以內(nèi)容盒子(zǐ)為(wèi)原δ♠點開(kāi)始計(jì)算(suàn)backgro★₹±und-position
對(duì)于background-clip和¥δ(hé)background-origin不(bù)同的(d$εσ±e)一(yī)個(gè)解釋參看(kàn)CSS3.info
新屬性：背景尺寸(background-size←¥δ)
background-size用(yòng)來(&γ☆₹lái)調整背景圖的(de)大(dà)小(xiǎo)。有(yǒu)好(↑←>•hǎo)幾個(gè)可(kě)能(néng)♠α✘值：
*background-size:contα∏ain;
縮小(xiǎo)圖片來(lái)适應元素的(₩εde)尺寸(保持像素的(de)長(cháng)ε ☆寬比)
*background-size:cover;
擴展圖片來(lái)填滿元素(保持像$¶¥♣素的(de)長(cháng)寬比)
*background-size:100px100px;
調整圖片到(dào)指定大(dà)小(xiǎo)
*background-size:50%∏α100%;
調整圖片到(dào)指定大(dà)小(xiǎo)。百分(fαπ™↑ēn)比是(shì)相(xiàng)對(duì)于包含元素的(de)尺寸的(≤β±≤de)。
可(kě)以看(kàn)一(yī)下(xià)CSS3規Ω₩®則網站(zhàn)上(shàng)的(d≥ ₩e)幾個(gè)例子(zǐ)。
新屬性：(background-break)
CSS3中，元素可(kě)以被分(fēn)成Ωα¶幾個(gè)獨立的(de)盒子(zǐ)(α♠∑Ω例如(rú)使內(nèi)聯元素span跨λ≤σ越多(duō)行(xíng))。backgroun∏βd-break屬性用(yòng)來(lái)控制(zhì)背景怎樣在這(☆≈<zhè)些(xiē)不(bù)同的(de)盒子(zǐ)中顯示。
可(kě)能(néng)值為(wèi)：¥₽
*Background-break:cont£✔&'inuous;
默認值。忽略盒之間(jiān)的(de)距離(γσ↕&lí)(也(yě)就(jiù)是(shì)像元素沒有(yǒ<€≈≥u)分(fēn)成多(duō)個(gè)盒子(zπ♦←★ǐ)，依然是(shì)一(yī)個(gè)整體(tǐ)一(yī)樣)↔₹✔
*Background-break:b↑§∑ounding-box;
把盒之間(jiān)的(de)距離≤δ ✔(lí)計(jì)算(suàn)在內(nèi)
*Background-break:each-box;
為(wèi)每個(gè)盒子(zǐ★& )單獨重繪背景
背景色(background-color)的(de)改進
background-color在c"±≠♦ss3中有(yǒu)了(le)稍許改進。除了(le)設置背景顔色之外($β₩♣wài)，如(rú)果元素底層的(de)背景圖不(bù)可(kě)用(y×>✔òng)，還(hái)可(kě)以設置一(yī)個(gè)“回退&₩♦λ色”。
通(tōng)過在回退色之前增加一(y♦∏ πī)個(gè)斜杠(/)來(lái)實現(xiàn)↑>'，例如(rú)：
background-color:green/blue;©© ♣
此例中，背景色應該是(shì)綠(lǜ)σ★色(green)。然而，如(rú)果底層背∑→<景圖不(bù)能(néng)使用(yòngγ₽')的(de)話(huà)，背景色就(ji€∏ù)是(shì)藍(lán)色而不(bùβ≤)是(shì)綠(lǜ)色。如(rú)果在斜杠前不(b€ε≥★ù)指定顔色，默認為(wèi)透明(míng)(transφ→parent)。
背景平鋪(background-repeat)的(dγ σe)改進
CSS2中當圖片平鋪時(shí)，ε✘會(huì)被元素在末端截斷。CSS3引入了(le)兩個(gè)屬性來(l♦≥≥ái)修正這(zhè)個(gè)問(wèn)題:
*space:應用(yòng)同等數(shù)量的(d' e)空(kōng)白(bái)到(dào)圖片之間(jiān)，直Ω∏$✔到(dào)填滿整個(gè)元素
*round:縮小(xiǎo)圖片直到( ☆♥♥dào)正好(hǎo)平鋪滿元素
關于background-repeat:sp™δ₽§ace;的(de)一(yī)個(gè)例子®©±¶(zǐ)，可(kě)以在CSS3規則網站(zhàn)看(kà☆π€n)到(dào)。
背景附著(zhe)(background-attachmen™"t)的(de)改進
background-attachment屬性增加了(leβ£÷)一(yī)個(gè)新值：local。這(zhè)是(shì)用(yòng♣☆)來(lái)配合可(kě)以滾動的(de)元素的(de)(設置為 ↕ δ(wèi)overflow:scroll;的(de)元素)。當ba¶☆∑δckground-attachment設置為(€wèi)滾動(scroll)時(shí)，背景圖★₹不(bù)會(huì)随元素內(nèi)容的(de¶ ≤≥)滾動而滾動。
設置為(wèi)background-attachment:→σ'™local;時(shí)，背景圖會(huì)随內(nèi)容φ® 的(de)滾動而滾動。
總結
總結一(yī)下(xià)，css中關于背景有(yǒu)許多(duō> ≠∏)需要(yào)知(zhī)道(dào)的(de)知(z₹' hī)識。但(dàn)是(shì)一(yī)旦把這(zhè)些(xiē)知∑↑(zhī)識融會(huì)貫通(tōng)了(le)，這(zhè)些(xi<•αē)技(jì)術(shù)和(hé)命名約定就(jiù)變得•∞©≈(de)非常有(yǒu)意義而且很(hěn)快(kuài)就(j↓≈•iù)會(huì)成為(wèi)潛意識行€≤≥(xíng)為(wèi)了(le)。
如(rú)果剛接觸css，主要(yào)不(bù)斷聯系就(jiù)可(♠'✔kě)以較快(kuài)地(dì)掌握背景的(de)要(yào)點♠♣∞了(le)。如(rú)果是(shì)老(lǎo)手，我希望你(nǐ)可(k©"ě)以和(hé)我一(yī)樣期待css3。
