以下內(nèi)容摘自MDN。因時(shí)間原因沒能好好整理學(xué)習(xí),先引用下來,有時(shí)間時(shí)再細(xì)細(xì)整理。
background-size 設(shè)置背景圖片大小。
Values
<length>
<length> 值,指定背景圖片大小,不能為負(fù)值。
<percentage>
<percentage> 值,指定背景圖片相對(duì)背景區(qū)(background positioning area)的百分比。背景區(qū)由background-origin設(shè)置,默認(rèn)為盒模型的內(nèi)容區(qū)與內(nèi)邊距,也可設(shè)置為只有內(nèi)容區(qū),或者還包括邊框。如果attachment 為fixed,背景區(qū)為瀏覽器可視區(qū)(即視口),不包括滾動(dòng)條。不能為負(fù)值。
auto
以背景圖片的比例縮放背景圖片。
cover
縮放背景圖片以完全覆蓋背景區(qū),可能背景圖片部分看不見。
contain
縮放背景圖片以完全裝入背景區(qū),可能背景區(qū)部分空白。
位圖一定有固有尺寸與固有比例,矢量圖可能兩者都有,也可能只有一個(gè)。漸變視為只有固有尺寸或者只有固有比例的圖片。
背景圖片大小計(jì)算:
如果指定了 background-size 的兩個(gè)值并且不是auto:
背景圖片按指定大小渲染。
contain 或 cover:
保留固有比例,最大的包含或覆蓋背景區(qū)。如果圖像沒有固有比例,則按背景區(qū)大小。
auto 或 auto auto:
圖像如果有兩個(gè)長(zhǎng)度,則按這個(gè)尺寸。如果沒有固有尺寸與固有比例,則按背景區(qū)的大小。如果沒有固有尺寸但是有固有比例, 效果同 contain。如果有一個(gè)長(zhǎng)度與比例,則由此長(zhǎng)度與比例計(jì)算大小。如果有一個(gè)長(zhǎng)度但是沒有比例,則使用此長(zhǎng)度與背景區(qū)相應(yīng)的長(zhǎng)度。
一個(gè)為 auto 另一個(gè)不是auto:
如果圖像有固有比例,則指定的長(zhǎng)度使用指定值,未指定的長(zhǎng)度由指定值與固有比例計(jì)算。如果圖像沒有固有比例,則指定的長(zhǎng)度使用指定值,未指定的長(zhǎng)度使用圖像相應(yīng)的固有長(zhǎng)度,若沒有固有長(zhǎng)度,則使用背景區(qū)相應(yīng)的長(zhǎng)度。
注意,對(duì)于沒有固有尺寸或固有比例的矢量圖不是所有的瀏覽器都支持。特別注意測(cè)試Firefox 7- 與Firefox 8+,以確定不同之處能否接受。
新聞熱點(diǎn)
疑難解答
圖片精選