CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 background-size 屬性使用方法及示例

CSS background-size屬性指定的背景圖像的大小。

下表總結(jié)了此屬性的用法上下文和版本歷史記錄。

默認(rèn)值：	auto auto
適用于：	所有元素
繼承：	沒有
可動畫制作：	是。請參考動畫屬性。
版本：	CSS3的新功能
JavaScript 語法:	object object.style.backgroundSize="60px 80px"

背景大小的使用語法

該屬性的語法如下：

background-size: length | percentage | auto | cover | contain | initial | inherit

下面的示例演示了如何使用background-size屬性。

示例

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
}

測試看看?/?

提示：該background-size屬性通常用于創(chuàng)建全尺寸背景圖像，該背景圖像將根據(jù)瀏覽器的視口或witdh的大小進(jìn)行縮放。

屬性值

下表描述了此屬性的值。

值	描述
length	將背景圖像的寬度和高度設(shè)置為指定的長度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果僅指定一個值，則第二個值默認(rèn)為auto。不允許負(fù)長度值。
percentage	將背景圖像的寬度和高度設(shè)置為背景定位區(qū)域的百分比。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果僅指定一個值，則第二個值默認(rèn)為auto。不允許使用負(fù)百分比值。
auto	一個auto用于一個維度值縮放在相應(yīng)的方向上的背景圖像，使得其固有比例被維持。如果auto兩個尺寸均指定了值，則背景圖像將包含其自己的寬度和高度，這是默認(rèn)行為。
cover	在保留圖像固有長寬比（如果有）的情況下，將圖像縮放到最小尺寸，以使其寬度和高度都可以完全覆蓋背景定位區(qū)域。
contain	將圖像縮放，同時保留其固有的長寬比（如果有），以最大尺寸進(jìn)行縮放，以使其寬度和高度都可以適合背景定位區(qū)域。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素background-size屬性的計(jì)算值。

瀏覽器兼容性

background-size屬性瀏覽器的兼容性，所有主流瀏覽器均支持該屬性。

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 3+ Opera 10.5+

進(jìn)一步閱讀

請參考以下教程：CSS背景，CSS3背景。

CSS border 屬性 CSS background-repeat 屬性