css background-size 平鋪屬性

對背景圖檔大小進行設定

div
{
background:url(img_flwr.gif);
background-size:px px;
background-repeat:no-repeat;
}
           

主流浏覽器基本全部支援

IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支援 background-size 屬性。

background-size共有四種方式

值 描述 測試

length

設定背景圖像的高度和寬度。

第一個值設定寬度，第二個值設定高度。

如果隻設定一個值，則第二個值會被設定為 “auto”。

{
    background-size: px auto;
}
           

percentage

以父元素的百分比來設定背景圖像的寬度和高度。

第一個值設定寬度，第二個值設定高度。

如果隻設定一個值，則第二個值會被設定為 “auto”。

測試

{
    background-size: % %;//此種方法可完全覆寫整個容器
}
           

cover

把背景圖像擴充至足夠大，以使背景圖像完全覆寫背景區域。

背景圖像的某些部分也許無法顯示在背景定位區域中。

{
    background-size:cover;
}
           

contain 把圖像圖像擴充至最大尺寸，以使其寬度和高度完全适應内容區域。

{
    background-size:contain;
}