定義:規定背景圖像的尺寸
background-size的類型
background-size需要兩個值,它的類型可以是像素(px)、百分比(%)或是auto,還可以是cover和contain。第一個值為背景圖的width,另外一個值用於指定背景圖上的height,如果只設定1個值,則第2個默認為auto,但當值為cover和contain時除外。
瀏覽器支持:IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+
使用<length>|<percentage>時,第一個值是指背景圖像的width,第二個指背景圖像的height,如果只有一個值,height就為auto
使用percentage注意:width和height是針對於背景區域,不是背景圖像大小。
cover:背景圖像縮放,保留圖像原有的比例/長寬比,不管背景圖像大於還是小於背景區域,都會覆蓋背景區域,圖像的寬度或高度等於或超過背景區域,再次,根據背景圖像的比例是否匹配的背景區域,背景圖像的某些部分可能不在背景區域內。
contain:背景圖像縮放,同時保留圖像原有的比例/長寬比,無論是圖像的寬度或高度超過背景區域,以盡可能大的覆蓋背景區域。因此,根據背景圖像的比例是否匹配背景區域,可能會有一些背景圖像覆蓋不到背景地區。
效果: