5.10日(rì)音(yīn)訊,輕松玩(wán)轉CSS背景

　　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ānβ↔g)将會(huì)涉及css背景(bac$ε kground)的(de)基本用(yòng)法，包括諸如(rú)bac₹<≈kground-attachment等的(de)屬性，也(yě÷♣β↕)會(huì)介紹一(yī)些(xiē)有(yǒu)關背景(backgr‍ ≤ound)的(de)常用(yòng)技(jì)巧，以及css3中的(de)¥∏₹π背景(background)(包含4個(gè)新的(de)背景(b↑​ackground)屬性)。

　　css2中的(de)背景(backg↓π©round)

　　概述

　　CSS2中有(yǒu)5個(gè)主要(yào)的(de)背景(ba≥׶¥ckground)屬性，它們是(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è)縮寫屬性:backgroun€±∏d。需要(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,Safar♣σi,Opera以及IE8中工(gōng)作(zu>×✔ò)正常，但(dàn)是(shì)IE6和(hé)IE7中，backgrou ×λ✘nd沒把border計(jì)算(suàn)在內(nèi✘≈×π)。

　　基本屬性

　　背景色(background-color)

　　background-color屬性用(yòng)純色來(lái)填充®λ€≥背景。有(yǒu)許多(duō)方式指定這(zhè)個(gè)顔色≠‌，以下(xià)方式都(dōu)得(de)到(dào)相(xiàng)同•↓¶‍的(de)結果。

　　background-color:blue;

　　background-color:rgb© (0,0,255);

　　background-color:#0000ff;®‌

　　background-color也(yě)可(kě)被設置為(↓¥$$wèi)透明(míng)（transparent），這(zhè)會(huì)使∑≥​™得(de)其下(xià)的(de)元素可(kě)見(φβjiàn)。

　　背景圖(background-image)

　　background-image屬性允許指定一(yī)個(gè)圖片展<β示在背景中。可(kě)以和(hé)backgro' εund-color連用(yòng)，因此如(rú)果圖片不(bù)重複地(d α↔ ì)話(huà)，圖片覆蓋不(bù)到(dào) σ♠≤地(dì)地(dì)方都(dōu)會(huì)被背景色填充。代碼ε←很(hěn)簡單，隻需要(yào)記住，路(lù)徑是(shì)相(x←φεiàng)對(duì)于樣式表的(de)，因此以下$ו(xià)的(de)代碼中，圖片和(hé)樣式表是(shì)在同一(yī<↑)個(gè)目錄中的(de)。

　　background-image:url(i∞"mage.jpg);

　　但(dàn)是(shì)如(rú)果圖片在一(∏★®‌yī)個(gè)名為(wèi)images的(de)子(zǐ)目 ×‌>錄中，就(jiù)應該是(shì)：

　　background-image:urΩ÷£l(images/image.jpg);

　　糖伴西(xī)紅(hóng)柿：使用(yòng)../表示上★ (shàng)一(yī)級目錄，比如(rú)backgrou♣★∑nd-image:url(../images/image.jpg)₽©¶∏;表示圖片位于樣式表的(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-re≥>peat)

　　設置背景圖片時(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-repea'"t;/*不(bù)平鋪。圖片隻展示一(yī)次。*/

　　background-repeat:repeat-$×♣x;/*水(shuǐ)平方向平鋪(沿x軸)*/

　　background-repeat:repeatλ↕£↕-y;/*垂直方向平鋪(沿y軸)*/

　　background-repeat:i πnherit;/*繼承父元素的(de)background-r₹≈epeat屬性*/

　　背景定位(background-posit♥↓ion)

　　background-position屬性用(yòng)來(lái)控制☆λ←÷(zhì)背景圖片在元素中的(de)位置。技(jì)巧 <是(shì)，實際上(shàng)指定的(de)是(shì)€δ圖片左上(shàng)角相(xiàng)對(duì)于元素左上(shàng★←♦)角的(de)位置。

　　下(xià)面的(de)例子(zǐ)中，設置±↕÷♦了(le)一(yī)個(gè)背景圖片并且用(yòng)backg‍₽<≠round-position屬性來(lái)控制(z₹☆✔✘hì)它的(de)位置，同時(shí)也(yě)設置了(le)backγ♥ground-repeat為(wèi)no-repeat。計(jì)量單位‍₹是(shì)像素。第一(yī)個(gè)數(shù)字表示x軸(水(↑∞$shuǐ)平)位置，第二個(gè)是(shì)y軸(垂直)位置。

　　/*例1:默認值*/

　　background-position:00;/*元素的(de)左♦€上(shàng)角*/

　　/*例2:把圖片向右移動*/

　　background-position:75px0;

　　/*例3:把圖片向左移動*/

　　background-position:-75px0;ε&>✘

　　/*例4:把圖片向下(xià)移動*/

　　background-position:0100γ&φεpx;

　　background-position屬性可​₩(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ī)樣，首先是(shì)x軸，其次是(shì)y軸，像這(zhèφ )樣：

　　background-position:topright;

　　使用(yòng)百分(fēn)數(shù)時↔α(shí)也(yě)類似。需要(yào)主要(yào)的(de‌♥¥)是(shì)，使用(yòng)百分(fēn↔¥Ω)數(shù)時(shí)，浏覽器(qì)是©•(shì)以元素的(de)百分(fēn)比數(shù)值來(lλ≥ái)設置圖片的(de)位置的(de)。看(kàn)例子(zǐ)就(jiù)×‍α¥好(hǎo)理(lǐ)解了(le)。假設設定如(rú)下(xλ€σià)：

　　background-position:100%50%;

　　Thisgoes100%ofthe÷↔'wayacrosstheimage(i.e.theveryright-£αhandedge)and100%ofthewayacrosstheelem✔☆ent(remember,thestartingpointisalways♥↔↑•thetop-leftcorner),andthetwolineupthere•✔ ‍.Itthengoes50%ofthewaydowntheimage±φ€®and50%ofthewaydowntheelementtolineup★©↑↑there.Theresultisthattheimagei₹≈¶salignedtotherightofthee ₽ε×lementandexactlyhalf-waydownit.

　　　　使用(yòng)百分(fēn)數(shù)定位時(α↓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)backgr δ↓←ound-position:100%50%;就∏✔​→(jiù)是(shì)将背景圖片的(de)100%(right)50%(ce ∞±nter)這(zhè)個(gè)點，和(hé)元素的 §(de)100%(right)50%(center) $這(zhè)個(gè)點對(duì)齊。

　　這(zhè)再一(yī)次說(sh"♣ πuō)明(míng)了(le)，我們一(yī)直認為(wèi)已經掌握的(dδ§e)簡單的(de)東(dōng)西(xī)，其實還(hái)有(Ω©yǒu)我們有(yǒu)限的(de)認知(zφ$hī)之外(wài)的(de)知(zhī)識。

　　注意原點總是(shì)左上(shàn≤ g)角，最終的(de)效果是(shì)笑(xiào)臉圖片被定 ≈₽β位在元素的(de)最右邊，離(lí)元素頂部是(shì)元素的(de)一(♥×'∞yī)半，效果和(hé)background-po→↑×↕sition:rightcenter;一(yī)樣。

　　背景附著(zhe)

　　background-attach​÷"™ment屬性決定用(yòng)戶滾動頁面時(shí)圖片的(de)狀态。三✔∞ 個(gè)可(kě)用(yòng)屬性為(wèi)α≤ scroll(滾動)，fixed(固定)和(hé)inherit(繼承)。in≥£herit單純地(dì)指定元素繼承他(tā)的(de)父元素的(de)b↔γεackground-attachment屬性。

　　為(wèi)了(le)正确地(dì)理(lǐ)解backgroun ↕ d-attachment，首先需要(yào)明(mín↕•↑g)白(bái)頁面(page)和(hé)視(shì)口(×‍φ₩viewport)是(shì)如(rú)何協作(zuò)地(dì)。視( σ&shì)口(viewport)是(shì)浏覽器(qì)顯示網£↓§頁的(de)部分(fēn)(就(jiù)是(s♣∑ hì)去(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ú)果設置background-₩♠'attachment:scroll，就(jiù)設置了(le)當元素滾動時(¥§→®shí)，元素背景也(yě)必需随著(zhe)滾動。簡¶"而言之，背景是(shì)緊貼元素的(de)。這(zhè)是±‌★(shì)background-attachment默認值。

　　用(yòng)一(yī)個(gè)例子(zǐ)來(l♥♦γ♣ái)更清楚地(dì)描述下(xià)：

　　background-image:url(test-¶ ←image.jpg);

　　background-position÷φ§★:00;

　　background-repeat:no"¶-repeat;

　　background-attachment:scroll;

　　當向下(xià)滾動頁面時(shí)，背景向上(≥‍shàng)滾動直至消失。

　　但(dàn)是(shì)當設置background-attachm© βent為(wèi)fixed時(shí)，當頁面向下(x¥♥★✘ià)滾動時(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:ur₩​↑l(test-image.jpg);

　　background-position:0★λ100%;

　　background-repeat:no-rep∞←eat;

　　background-attachment:fi€<≈xed;

　　頁面已經向下(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ì)口(view×​≠port)定位地(dì)，如(rú)果它的(de)父元素不(b∑±ù)可(kě)見(jiàn)，圖片就(jiù)會(Ω±huì)消失。參見(jiàn)下(xià)面的(de)例子(z♣∞ǐ)。此例中，圖片位于視(shì)口(viewpor€±λ‍t)的(de)左下(xià)方，但(dàn)是(shì)隻有$✘↕(yǒu)元素內(nèi)的(de)圖片部分(fēn)是(shì)可(★•©≈kě)見(jiàn)的(de)。

　　background-image:url(test-image.j×Ω≤↑pg);

　　background-position:0100%;

　　background-repeat:no-r•≥epeat;

　　background-attachment:fixed;

　　因為(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ú)下(x₩®<±ià)：

　　background:

　　例如(rú)，下(xià)面的(de)聲明(míng)

　　background-color:☆≥transparent;

　　background-image:url(image↓←'≤.jpg);

　　background-position:50%0;

　　background-attachm§✘ent:scroll;

　　background-repeat:repeat- ​∑y;

　　可(kě)以合為(wèi)單獨一(yī)行(xíng)：

　　background:transpar¶♠ ≠enturl(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%0≥εα₽repeat-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)長(cδ ≤háng)度是(shì)比較困難的(de)。如(rú)果π≈長(cháng)度不(bù)同，其中一(yī)欄的(de)背景≥×會(huì)比另外(wài)的(de)短(↑≤∞‍duǎn)，這(zhè)會(huì)破壞整個(gè)設計(jì)。

　　仿欄是(shì)個(gè)非常簡單的(de)背景技(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òng)J←‍avaScript。一(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ì)中就(jγ‌£iù)會(huì)顯示首選的(de)字體(tǐ)。

　　例如(rú)，HTML标記可(kě)能(néng)是(shì)這(zh≥§≤↔è)樣的(de)：

　　

Blogroll

　　假如(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;/*Sothat‌Ω $theelementwillshowthewholeimage.*/

　　background:url(blogroll-text.jpgπ→)00no-repeat;/*Setsthebackgr→↓↑≥oundimage*/

　　text-indent:-9999↑‍px;/*Hidestheregulartextbymovingit999÷‌>9pixelstotheleft*/

　　}

　　簡單的(de)圓點

　　無需列表中的(de)圓點看(kàn)起來(l✔≥♠ái)很(hěn)難看(kàn)。不(bù)用(yòn ¶g)再處理(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)更漂亮(liàn ↕‌g)。

　　下(xià)面，我們把一(yī)個(gè)無©®需列表改造成有(yǒu)圓滑圓點的(de)：

　　ul{

　　list-style:none;/*Removesdefaultb Ω<↔ullets.*/

　　}

　　ulli{

　　padding-left:40px;/*Indents÷&±​listitems,leavingroomforbackgroundim↕↑ageontheleft.*/

　　background:url(bulletpoint.jpg)00no​α -repeat;

　　}

　　CSS3中的(de)背景

　　CSS3中的(de)背景有(yǒu)較多(duō)改進。最顯著的(dδ★≈e)是(shì)多(duō)背景圖片的(de)選> 項，同時(shí)也(yě)增加了(le✔λ)4個(gè)新屬性。

　　多(duō)背景

　　CSS3中，可(kě)以對(duì)一(yī)個(gè)元素應ε↔Ω 用(yòng)一(yī)個(gè)或多(duō)個(gè)₩≠♥σ圖片作(zuò)為(wèi)背景。代碼和(hé)c≤↓↕ss2中的(de)一(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.jp¥±≤g),url(bottom-image.jpg);

　　新屬性：背景修剪(background-clip)

　　這(zhè)又(yòu)把我們帶回了(le)文(w₹∑←‌én)章(zhāng)開(kāi)始討(♥επtǎo)論的(de)那(nà)個(gè)關于邊框內(nèi)圖片顯示的(&παde)話(huà)題。它被描述為(wèi)“背景描繪區(qū)&r¶€↑'dquo;。

　　background-clip屬性用(yòγ≤ng)來(lái)增強背景顯示位置的(de)控制(zhì)能(néng)力。可₽≤×±(kě)能(néng)的(de)值為(wèi)：

　　*background-clip:border-box;

　　背景顯示在邊框內(nèi)。

　　*background-clip:padding-box;

　　背景顯示在內(nèi)補白(bái)(padding)內(nèi)，≥×而不(bù)是(shì)邊框內(nèi)。

　　*background-clip:content-bo→σx;

　　隻在內(nèi)容內(nèi)顯示背景，而不(bù)是(shì)內(nèδ₹αi)補白(bái)(padding)和(hé)邊框內( ₹nèi)。

　　*background-clip:no-✔ε'clip;

　　默認值，和(hé)border-box一(yī)樣。

　　新屬性：背景原點(background-or₽> igin)

　　這(zhè)個(gè)屬性和(hé)background-posit∑↑ion結合起來(lái)使用(yòng)。可(kě)以從(cóng)邊框，≥$∏內(nèi)補白(bái)或者內(nèi)容盒∑¥♦>子(zǐ)開(kāi)始計(jì)算(suàn)background-p₹‍osition(類似于background-clip)。α€‍δ

　　*background-origin:borde♥♣r-box;

　　以邊框為(wèi)原點開(kāi)始計(jì)算(γλ★‍suàn)background-positi•∞φφon.

　　*background-origin:paddi γng-box;

　　以內(nèi)補白(bái)為(wèi)原點開(kāi‍>δ)始計(jì)算(suàn)background-position

　　*background-origiε‍n:content-box;

　　以內(nèi)容盒子(zǐ)為(wèi)原點開(kāi∞¥€)始計(jì)算(suàn)background-position

　　對(duì)于background-clip和(hé)backg∞©δ↔round-origin不(bù)同的(de)一(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:conta ∏¥in;

　　縮小(xiǎo)圖片來(lái)适應元素ελ♠φ的(de)尺寸(保持像素的(de)長(c<<háng)寬比)

　　*background-size:coΩ₩©ver;

　　擴展圖片來(lái)填滿元素(保持像素的(de)∏✘ε長(cháng)寬比)

　　*background-size:100p≈≥ε​x100px;

　　調整圖片到(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)的(de)幾個(gè)例子(♥±$zǐ)。

　　新屬性：(background-break)

　　CSS3中，元素可(kě)以被分(fēn)成幾個(gè×¥)獨立的(de)盒子(zǐ)(例如(rú)使內<₽©(nèi)聯元素span跨越多(duō)行(xíng₽ ♦←))。background-break屬性用(yòng)來(♥βlái)控制(zhì)背景怎樣在這(zhè)些σ<(xiē)不(bù)同的(de)盒子(zǐ)中↑"顯示。

　　可(kě)能(néng)值為(wèi)：← ☆↕

　　*Background-break:con £€tinuous;

　　默認值。忽略盒之間(jiān)的(de)距離(lí)(∑≥‌¥也(yě)就(jiù)是(shì)像元素沒有(yǒ✔♦✘u)分(fēn)成多(duō)個(gè)盒子(zǐ)，依然>♠α是(shì)一(yī)個(gè)整體(tǐ)$∞一(yī)樣)

　　*Background-break:bo€γunding-box;

　　把盒之間(jiān)的(de)距離(lí)計(jì)δ<‌算(suàn)在內(nèi)

　　*Background-break:each-box;

　　為(wèi)每個(gè)盒子(zǐ)單獨重繪​ ≠背景

　　背景色(background-color)的(de)改進

　　background-color在css3中有(&¶✔yǒu)了(le)稍許改進。除了(le)設置✔γ≥背景顔色之外(wài)，如(rú)果元素底層的(de)背景"ε圖不(bù)可(kě)用(yòng)，還(≥ πhái)可(kě)以設置一(yī)個(gè)“回退色&δ↓Ω↕rdquo;。

　　通(tōng)過在回退色之前增加一(yī)個(gè)斜杠(/)來(₩↔lái)實現(xiàn)，例如(rú)：

　　background-color:green/blue;

　　此例中，背景色應該是(shì)綠(lǜ)色(gr α§een)。然而，如(rú)果底層背景圖不(←<→bù)能(néng)使用(yòng)的(de)話(huà)，背景色就(∞‌jiù)是(shì)藍(lán)色而不(bù)是(shì)綠(lǜ ​β&)色。如(rú)果在斜杠前不(bù)指定顔色，默認為(wèi)透明φ←(míng)(transparent)。

　　背景平鋪(background-repeβ€€at)的(de)改進

　　CSS2中當圖片平鋪時(shí)，會φ↑(huì)被元素在末端截斷。CSS3引入了(le)兩個(¥ ×gè)屬性來(lái)修正這(zhè)個(gè)問(wèn)題:

　　*space:應用(yòng)同等數(sh ♣±ù)量的(de)空(kōng)白(bái)到(dà≈♠"o)圖片之間(jiān)，直到(dào)填滿÷♠™ε整個(gè)元素

　　*round:縮小(xiǎo)圖片直到(dào)正好(hǎo)→γ‍↕平鋪滿元素

　　關于background-repeat:space;的(de)β↓一(yī)個(gè)例子(zǐ)，可(kě)以在✔&CSS3規則網站(zhàn)看(kàn)到(dào≠←)。

　　背景附著(zhe)(background-attachmen✔' t)的(de)改進

　　background-attachment屬®←✘性增加了(le)一(yī)個(gè)新值：local。這(z♦↑​φhè)是(shì)用(yòng)來(lá♠® ​i)配合可(kě)以滾動的(de)元素的(de)(設置為(wè‍↓•™i)overflow:scroll;的(de)元素)。當backg÷≥round-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)知(zhī)識。但(dàn)是(shì)一(yī♦≤')旦把這(zhè)些(xiē)知(zhī)識融會(huì)‌≤貫通(tōng)了(le)，這(zhè)$←β些(xiē)技(jì)術(shù)和(hé)命名約定就(jiù)變得γ¥☆(de)非常有(yǒu)意義而且很(hěn)快(kuà"★i)就(jiù)會(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ī)樣期待c↕ ₹ss3。