css設(shè)置全屏背景圖片的方法

發(fā)布時(shí)間：2021-01-11 13:53:37 來(lái)源：億速云閱讀：294 作者：小新欄目：web開發(fā)

這篇文章主要介紹css設(shè)置全屏背景圖片的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

css設(shè)置全屏背景圖片的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在css里為body添加背景圖標(biāo)；最后通過(guò)添加background-size樣式來(lái)設(shè)置全屏背景圖片即可。

在html里我們不輸入任何東西，直接是一個(gè)body，加上樣式。

css設(shè)置全屏背景圖片的方法

css里為body添加背景圖標(biāo)。

css設(shè)置全屏背景圖片的方法

運(yùn)行頁(yè)面，當(dāng)圖片不是很大時(shí)，頁(yè)面的背景只是占一部分。

css設(shè)置全屏背景圖片的方法

要鋪滿整個(gè)頁(yè)面，我們可以簡(jiǎn)單的使用repeat屬性，也是勉強(qiáng)可以的。

css設(shè)置全屏背景圖片的方法

但這種鋪滿是重復(fù)用多張相同的圖片來(lái)鋪的，只有當(dāng)你的背景圖片是純色等相差不大的情況時(shí)，才是可以接受的。

css設(shè)置全屏背景圖片的方法

另一種較為完美的方式，是添加background-size樣式，設(shè)置為100%，就是讓背景圖片占滿。

css設(shè)置全屏背景圖片的方法

從效果上看，雖然圖片有拉伸，但總體來(lái)看，是可以接受的。

css設(shè)置全屏背景圖片的方法

以上是“css設(shè)置全屏背景圖片的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡