CSS3 background-size♣↔圖片自(zì)适應

background- size屬性和(hé)back↓‍<↔ground-origin屬性、background'€-clip屬性一(yī) 樣，也(yě)是(shì)CSS3對(d$↕uì)于background新增加的(de)屬性。它的(de)作(ε¥"zuò)用(yòng)是(shì)指定背景圖↓☆γ片的(de)大(dà)小(xiǎo)，比如(rú)：對(duì)于一(y→★÷ī)個(gè)div塊，我們需要(yào)為(wèi)它添加一(yī)張圖片←★作(zuò)為(wèi)背景，然 而圖片大(dà)小(xiǎ¥πo)并非總能(néng)盡如(rú)人(rén)意，但(dàn)我們又π±>(yòu)不(bù)想使用(yòng)backgr$αound-repeat屬性讓背景平鋪，那(nà)麽這★ ​(zhè)時(shí)我們就(jiù)可(kě)以使用(yòng)bac∑αβ♦kground- size屬性使圖片放(fàng)大(dà)或者是(shì∑"₽)縮小(xiǎo)來(lái)适應div塊，當然這(zhè)也(yě)®™可(kě)能(néng)會(huì)造成背景圖的(de)×$∞♥失真。

下(xià)面我們就(jiù)先從(cóng)它的££←₽(de)語法說(shuō)起吧(ba)：

background-size ：[ | | auto ]{1,2} | cover | contain ；

這(zhè) 個(gè)屬性有(yǒu)2個(gè₩β¥✔)可(kě)選值，第1個(gè)值用(yòng)于指定背景圖✔€✘的(de)寬width，第2個(gè)值用(yòng)于指定背景圖的​§(de)高(gāo)height，如(rú)果隻‍∏設定1個(gè)值，則第2個(gè)值默認為(↔‍☆wèi)自(zì)動 auto。這(zhè)兩個(gè)值可(k€¥₩≈ě)取數(shù)字（單位為(wèi)px）也(yě"±≤)可(kě)以取百分(fēn)比，當指定為(wèi)百分(₽'Ω♠fēn)比時(shí)，大(dà)小(xiǎo)會(huì)由所在區(qū)域↑&≤↕的(de)寬度、高(gāo)度，以及background-origiφ∑n的(de) 位置決定，當然還(hái)可(kě)以通(tōng)過co∏₹÷ver和(hé)contain來(lái)≥¶♣對(duì)圖片進行(xíng)伸縮。

cover：用(yòng)于等比放(fàng)大(dà)背景圖

contain：用(yòng)于等比縮小(xiǎo)背景圖(背景圖需大(dà)↔≈ε 于塊，否則背景圖仍會(huì)被放(fàng)大(dà)以适應塊)