CSS背景圖可以為網站增添美觀性和個性化,而滿屏顯示的背景圖更能讓網站顯得更加精致和大氣。
body { background: url("圖片鏈接"); background-size: cover; background-repeat: no-repeat; background-position: center; }
上面的代碼是實現背景圖滿屏顯示的基本代碼。我們可以先將需要的背景圖保存好,然后將圖片鏈接填寫在代碼中。
其中,background-size: cover;
將背景圖的寬高設置為與瀏覽器窗口相同,實現滿屏顯示效果。
background-repeat: no-repeat;
則防止背景圖重復顯示。
background-position: center;
可以將背景圖放置在瀏覽器窗口中央。
需要注意的是,如果需要在移動設備上實現滿屏背景圖,則還需要在樣式表中加入如下代碼:
html, body { height: 100%; width: 100%; overflow: hidden; }
這段代碼可以使html和body元素的高度和寬度對應于視窗,使其可滾動。
最后,希望大家可以在使用背景圖時,盡可能減小圖片體積,提高網站的加載速度。
下一篇css 背景不滾動條