使用background-size讓背景圖按比例適應(yīng)div

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

background-size 設(shè)置背景圖片大小
屬性值：

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

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

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

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

background知識點

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。