有次UI給我提出了bug說我的登錄頁的背景圖變形了，后來查了下正確的背景圖設置，如下：

.login-box {width: 100%;height: 100%;background: url("../../assets/img/login_bg.png") no-repeat;background-size: cover;background-attachment: fixed;min-height: 100vh; }

background: url(“…/…/assets/img/login_bg.png”) no-repeat 設置背景圖片地址 no-repeat背景圖像將僅顯示一次,在水平和垂直方向上不重復；

background-size: cover; 圖片等比例擴大。背景圖像的某些部分也許無法顯示在背景定位區域中，圖片多出的部分則會被截掉。

這里還可以設置：

background-size: contain; 圖片比例不變，把圖像圖像擴展至最大尺寸，容器可能會有留白區域

background-size: 100% 100%; 使圖片占滿整個頁面。

background-attachment：fixed 當頁面的其余部分滾動時，背景圖像不會移動

總結

以上是生活随笔為你收集整理的css设置背景图片等比例铺满整个页面的全部內容，希望文章能夠幫你解決所遇到的問題。

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