站長資訊網(wǎng)在css中，可以利用background-size屬性設(shè)置背景圖片的大小，該屬性可以指定背景圖像的尺寸，語法格式“background-size: 帶長度單位的數(shù)值|百分比值|cover|contain;”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以利用background-size屬性設(shè)置背景圖片的大?。豢梢蚤L度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
background-size:auto;/* 默認值，不改變背景圖片的高度和寬度 */ background-size:100px 50px;/* 第一個值為寬，第二個值為高，當設(shè)置一個值時，將其作為圖片寬度來等比縮放 */ background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示，當設(shè)置一個值的時候同也將其作為圖片寬度來等比縮放 */ background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */ background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */
屬性值：
| 值 | 描述 |
|---|---|
| length |
設(shè)置背景圖像的高度和寬度。 第一個值設(shè)置寬度，第二個值設(shè)置高度。 如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。 |
| percentage |
以父元素的百分比來設(shè)置背景圖像的寬度和高度。 第一個值設(shè)置寬度，第二個值設(shè)置高度。 如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。 |
| cover |
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。 背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 |
代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background: url(img/5.jpg); background-size: 100px 100px; -moz-background-size: 100px 100px; /* 老版本的 Firefox */ background-repeat: no-repeat; padding-top: 80px; } </style> </head> <body> <p>上面是縮小的背景圖片。</p> <p>原始圖片：<br /> <img src="img/5.jpg" alt="Flowers"></p> </body> </html>
效果圖：
（學(xué)習視頻分享：css視頻教程）
