你是不是也遇到過(guò)這樣的問(wèn)題？網(wǎng)頁(yè)背景圖明明很美，卻總是“卡在角落”、“拉伸變形”、“留白太多”……別急，今天我就來(lái)手把手教你——如何用CSS讓背景圖片真正鋪滿整個(gè)網(wǎng)頁(yè)，不浪費(fèi)一像素！
Q：為什么我設(shè)置了 backgroundimage: url(‘xxx.jpg’) 后，圖片只顯示一小部分？
這是因?yàn)槟J(rèn)情況下，CSS的backgroundsize是“auto”，也就是按原圖尺寸顯示。如果你的圖片比屏幕小，它就不會(huì)自動(dòng)鋪滿。解決方法很簡(jiǎn)單：
?? 設(shè)置 `backgroundsize: cover;` —— 這是最常用的方案，它會(huì)保持圖片比例，填滿整個(gè)容器，多余部分裁掉，視覺(jué)上超級(jí)干凈。
Q：那如果我想讓圖片完全平鋪，不裁剪呢？
沒(méi)問(wèn)題！用 `backgroundsize: 100% 100%;` 就行啦！這個(gè)會(huì)讓圖片拉伸到和屏幕一樣大，適合那種寬高比接近1:1的圖片（比如很多手機(jī)拍攝的風(fēng)景照）。但注意??：如果原圖比例不對(duì)，會(huì)出現(xiàn)拉伸變形哦～
Q：我在用Chrome調(diào)試時(shí)發(fā)現(xiàn)圖片鋪滿了，但手機(jī)上看卻不是？
這是個(gè)常見(jiàn)坑！移動(dòng)端設(shè)備分辨率差異大，建議你在寫(xiě)CSS時(shí)加上：
body { backgroundimage: url('yourbg.jpg'); backgroundsize: cover; backgroundposition: center; backgroundrepeat: norepeat; height: 100vh; / 關(guān)鍵！強(qiáng)制撐滿視口高度 / width: 100vw;}特別是 `height: 100vh`，它能確保背景從頂部到底部無(wú)縫覆蓋，無(wú)論用戶怎么滑動(dòng)都不會(huì)有空白。
真實(shí)案例分享：我之前幫一個(gè)旅游博主做個(gè)人主頁(yè)，她用了自己拍的九寨溝日出照片當(dāng)背景。一開(kāi)始圖片只占屏幕左上角，顯得特別局促。我改了這幾句CSS后，整頁(yè)瞬間有了沉浸感——用戶一進(jìn)來(lái)就像站在湖邊看朝陽(yáng)，連點(diǎn)贊率都提升了30%！
小貼士：別忘了加 `backgroundposition: center;`，避免圖片偏移；如果想讓背景動(dòng)起來(lái)，還可以配合 `backgroundattachment: fixed;` 實(shí)現(xiàn)視差效果（適合高端項(xiàng)目）。
記住：一張好圖 + 一行正確CSS = 網(wǎng)頁(yè)質(zhì)感直接起飛！快去試試吧～?
轉(zhuǎn)發(fā)給正在為背景圖發(fā)愁的朋友，一起變專業(yè)！
