.login {

background: url(img/login.jpg) no-repeat center center;

background-size: cover;

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

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

問題一：


因為background-attachment:fixed屬性在移動端不兼容，就出現了在手機端顯示的時候背景圖不展開的情況。

問題二：

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

有定位的時候，在PC端當列表內容超過屏幕高度時，列表無法下拉。

整體來說，上面的寫法對PC端、移動端都不是很友好。

所以我搜了一個更好的寫法，在背景前添加了一個偽類，即兼容性移動端，也沒有列表無法滾動的問題。

.login:before {

content: "";

background: url(img/login.jpg) no-repeat center center;

background-size: cover;

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

總結

以上是生活随笔為你收集整理的html背景图片手机端全屏,css 背景图全屏显示，兼容移动端的全部內容，希望文章能夠幫你解決所遇到的問題。

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