當(dāng)我們想要將一張圖片在網(wǎng)頁中鋪滿整個頁面時(shí),可以利用CSS的background屬性完成。 首先,在HTML文件中,我們需要添加一個div標(biāo)簽,并將其樣式設(shè)為鋪滿整個頁面:
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } div { width: 100%; height: 100%; }
接著,在CSS樣式表中,我們可以利用background屬性來設(shè)定背景圖片,我們可以將圖片的鏈接寫在url()內(nèi),并設(shè)置background-size為cover,讓圖片鋪滿整個頁面
div { background: url(圖片鏈接) no-repeat center center fixed; background-size: cover; }
在這里,我們使用了background的三個屬性:
- background-image: 指定要在背景中顯示的圖片
- background-repeat: 指定背景圖像是否應(yīng)平鋪以填充整個元素
- background-size: 指定背景圖片的尺寸
當(dāng)我們將以上代碼全部放在一起時(shí),我們就可以將一張圖片鋪滿整個頁面啦!
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } div { width: 100%; height: 100%; background: url(圖片鏈接) no-repeat center center fixed; background-size: cover; }
至此,我們就成功將一張圖片鋪滿整個頁面了!
上一篇css把按鈕變圓
下一篇css把文字打在圖片上