語法：background-size: auto || <length> || <percentage> || cover || contain

取值說明：

1.auto:此值為默認值，保持背景圖片的原始高度和寬度

2.<length>此值設置具體的值，可以改變背景圖片的大小

3.<percentage>此值為百分值，可以是0％?100％之間任何值，但此值只能應用在塊元素上，所設置的百分值將使背景圖片的大小根據所在元素的寬度的百分比來計算

4.cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小于容器時，又無法使用background-repeat來實現時，我們就可以采用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真

5.contain:此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大于元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止，這種方法同樣會使用圖片失真

注：當background-size取值為和<percentage>時可以設置兩個值，也可以設置一個值，當只取一個值時，第二個值相當于auto，但這里的auto并不會使背景圖片的高度保持自己原始高度，而會與第一個值相同

實例：

隨便找張圖片(50px*50px)來當作背景圖片使用

DEMO1:auto

我來看第一個DEMO,在前面的DEMO上加上和個class名為”backgroundSizeAuto”,在這個Demo上我們應用上前面所示的背景，并把background-size取值為auto

DEMO2:length

DEMO3:percentage

DEMO4:cover

DEMO5:contain

DEＭＯ三中的cover是把背景圖片放大到適合元素容器的尺寸，這時的contain剛好是跟cover相反，是把背景圖片縮小到適合元素容器的尺寸

總結：從上面的幾個DEMO效果可以看出，只有當background-size值為auto時，背景圖片才不會變形失真，而其他值都會造成背景圖片變形夫真，所以大家使用時需要仔細考慮好，以免給你的制作帶來不良效果

總結

以上是生活随笔為你收集整理的CSS之background-size属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。