background-size

語法:

background-size<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

預設值auto

適用於:所有元素

繼承性:無

動畫性:是,除非使用值為關鍵字

計算值:指定值

媒 體:視覺

取值:

<length>
用長度值指定背景圖片大小。不允許負值。
<percentage>
用百分比指定背景圖片大小。不允許負值。
auto:
背景圖片的真實大小。
cover:
將背景圖片等比縮放到完全覆蓋容器,背景圖片有可能超出容器。
contain:
將背景圖片等比縮放到寬度或高度與容器的寬度或高度相等,背景圖片始終被包含在容器內。

說明:

定義背景圖片的尺寸大小
  • 該屬性接受1~2個參數值(covercontain關鍵字只接受一個)。如果提供兩個,第一個用於定義背景圖片寬度,第二個定義高度;只提供一個,該值用於定義背景圖片的寬度,高度將依據圖片寬度定義進行等比縮放計算得到。
  • 當屬性值為百分比時,參照背景圖片的background-origin區域大小進行換算(而不是包含塊大小)。

    百分比參照計算:

    .demo {
    	width: 200px;
    	height: 200px;
    	padding: 20px;
    	background-image: url(test.jpg);
    	background-repeat: no-repeat;
    	background-size: 50% 50%;
    }

    因為background-origin的預設值為padding-box(即包含padding),所以此時,背景圖片的計算值為:120px 120px

    改變background-origin的取值:

    .demo {
    	background-origin: content-box;
    }

    由於將background-origin設定為了content-box(即內容區域),所以此時,背景圖片的計算值為:100px 100px

  • 對應的腳本特性為:backgroundSize

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
Multiple background size 8.0
9.0+

示例: