中壢網頁設計

-moz-background-size:auto;        /*for Firefox*/ -webkit-background-size:auto;        /*for Google Chrome、Safari*/ -o-background-size:auto;        /*for Opera*/ background-size:auto;        /*for IE*/ 複製代碼 background-size：auto; -moz-background-size:50%; -webkit-background-size:50%; -o-background-size:50%; background-size:50%; 複製代碼   來源：http://www.kip.com.tw/modules/news/article.php?storyid=35 cover使背景圖不靠repeat，占滿全部內容版面。 雖可肆意指定圖片大小，但假如數值沒取好，輕易使佈景圖變形失真，猶如此類型。 網頁設計  -moz-background-size:200px; -webkit-background-size:200px; -o-background-size:200px; background-size:200px; 複製代碼 網頁設計 指定配景圖片寬度200px高度auto   結果呈現為了讓呈現結果有明顯的區分，範例中的屬性預設為： width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;

contain使後臺圖在尺寸大於內容元素的情形下，得以完整顯現。

background-size：contain

contain首要用於背景圖大於所在內容，由於背景圖尺寸(100px*122px)，所以將此範例內容元素屬性設為width:50px;height:61px;
 

指定佈景圖片巨細
background-size：bg-size , bg-size
bg-size = auto | length | percentage | cover | contain

• 預設值為auto，即靠山圖片原始長寬。
• length指定圖片具體大小的數值，不許可負值。
• percentage以後臺圖所在元素的百分比指定靠山圖巨細，不許可負值。
• length與percentage可設定2數值，也可只設定1個數值，當只設定一個數值，另外一個數值(高)預設值為auto，此時高度以佈景圖原始寬高比例，主動縮放。
• cover首要用於靠山圖小於所在的內容，而背景圖又不合適利用repeat，此時就能夠採用cover的體式格局，使背景圖放大至內容的巨細，但此方式輕易使背景圖因放大而失真。
• contain與cover正好相反，首要用於佈景圖大於地點內容，但卻需要將後臺圖完整出現，此時便可採用contain的體例，使配景圖縮小至內容的巨細。

auto取自原後臺圖片的尺寸不作任何的修改，所以出現結果和沒加background-size效果是一樣的。

指定靠山圖片寬度50%高度auto
 

• Firefox(3.63+較好支援)
• Google Chrome(5+較好支援)(P.S：Google瀏覽器自動更新，不需憂慮利用到舊版)
• Internet Explorer(IE6、IE7 不支援、IE8 很少支援)
• Opera(10+部份支援)
• Safari(4+較好支援)

此典範榜樣和上個典範榜樣，都是設定後臺圖片寬為200px，但分歧點在於此範例的高度為auto，高度是共同寬度作比例的縮放，此為它的長處。

CSS 3 瀏覽器支援狀態

佈景圖可依內容元素的寬高，作百分比的縮放，同樣要注意數值的設定，避免後臺圖片變形失真，猶如範例。

background-size：length

指定後臺圖片寬度200px高度150px

background-size：cover
 

此範例和上個範例，都是設定靠山圖片寬為50%，但分歧點在於此典範榜樣的高度為auto，高度是合營寬度作比例的縮放，此為它的長處。

典範榜樣中所利用的佈景圖(100px*122px)

background-size：percentage

指定後臺圖片寬度50%高度100%