css 背景圖片尺寸設置 background-size


定義:規定背景圖像的尺寸

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:背景圖像縮放,同時保留圖像原有的比例/長寬比,無論是圖像的寬度或高度超過背景區域,以盡可能大的覆蓋背景區域。因此,根據背景圖像的比例是否匹配背景區域,可能會有一些背景圖像覆蓋不到背景地區。

效果:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM