使用background-size讓背景圖按比例適應div

用法：
background：url(’…/…png’) center center no-repeat
background-size:cover

background-size 設置背景圖片大小
屬性值：

contain
讓背景圖完整顯示，
若設置repeat會平鋪滿div，多余部分切除
no-repeat則可能導致頁面部分空白。

cover
讓背景圖片按照自身比例填滿div，可能會導致圖片部分未顯示，
且在未設置attachment的情況下默認為scroll，當窗口縮放時背景圖會出現空白頁

具體數值或者百分比，如果只有有一個則按比例縮放

頁面縮放時出現空白的解決方法：
窗口縮小時出現空白，將設置位置值center center 后一個改成attachment的fixed值就可以自適應且不出現空白，這里的fixed是保證在cover的情況下背景圖不會隨著頁面的滾動縮放而縮放

background知識點

background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動即fixed和scroll

background-image:使用的背景圖像
background-color:背景顏色
background-repeat:如何重復背景圖像，no-repeat 背景圖像將僅顯示一 次，repeat 默認將在垂直方向和水平方向重復，repeat-x，repeat-y.

background-position：設置背景圖像的起始位置
簡寫：background：color image repeat attachment position

總結

以上是生活随笔為你收集整理的如何让背景图按div自适应大小的全部內容，希望文章能夠幫你解決所遇到的問題。

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