CSS3 是一種強(qiáng)大的樣式語(yǔ)言,它的背景樣式功能豐富,可以輕松地創(chuàng)建各種驚人的背景效果。其中,背景鋪滿是一種很常見的效果,下面就來介紹一下如何用 CSS3 實(shí)現(xiàn)背景鋪滿。
body { background-image: url(bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; }
上述代碼中,我們使用了 background-image 屬性來設(shè)置背景圖像,其中 bg.jpg 是我們要使用的圖片的 URL 地址。接下來,我們使用了 background-size 屬性來指定背景圖像的尺寸,將它設(shè)置為 cover 可以讓圖片盡可能地覆蓋整個(gè)屏幕。
同時(shí),我們還使用了 background-repeat 屬性來指定背景圖像的重復(fù)方式,將它設(shè)置為 no-repeat 可以讓圖片不重復(fù)出現(xiàn)。最后,我們使用了 background-position 屬性來指定背景圖像的位置,將它設(shè)置為 center center 可以讓圖片在屏幕中央居中顯示。
通過以上的 CSS3 代碼,我們可以輕松地實(shí)現(xiàn)一個(gè)鋪滿整個(gè)屏幕的背景效果,讓我們的網(wǎng)頁(yè)變得更加美觀、吸引人。