CSS3 background-size 屬性 · W3School CSS 參考手冊

# CSS3 background-size 屬性 ## 實例規定背景圖像的尺寸： ``` div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。 ## 定義和用法 background-size 屬性規定背景圖像的尺寸。 | 默認值： | auto | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.backgroundSize="60px 80px" | | --- | --- | ## 語法 ``` background-size: _length_|_percentage_|cover|contain; ``` | 值 | 描述 | 測試 | | --- | --- | --- | | _length_ | 設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。 | [測試](/tiy/c.asp?f=css_background-size) | | _percentage_ | 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。 | [測試](/tiy/c.asp?f=css_background-size&p=5) | | cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。 | [測試](/tiy/c.asp?f=css_background-size&p=7) | | contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 | [測試](/tiy/c.asp?f=css_background-size&p=8) | ## 親自試一試 - 實例 [拉伸背景圖像](/tiy/t.asp?f=css3_background-size2) 拉伸背景圖像來完全覆蓋內容區域。 ``` <!DOCTYPE html> <html> <head> <style> div { background:url(/i/bg_flower.gif); background-size:35% 100%; -moz-background-size:35% 100%; /* 老版本的 Firefox */ background-repeat:no-repeat; } </style> </head> <body> <div> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> </div> </body> </html> ``` [拉伸背景圖像，對背景圖像水平復制四次](/tiy/t.asp?f=css3_background-size3) 對背景圖像進行拉伸，以使背景圖像恰好水平復制四次。 ``` <!DOCTYPE html> <html> <head> <style> div { background:url(/i/bg_flower.gif); background-size:25%; border:2px solid #92b901; } </style> </head> <body> <div> <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p> <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p> <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p> <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p> <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p> <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p> </div> </body> </html> ``` ## 相關頁面 CSS3 教程：[CSS3 背景](/css3/css3_background.asp "CSS3 背景")