CSS圖片背景鋪滿是網(wǎng)頁設(shè)計(jì)中常見的一種效果。通過CSS的background屬性可以設(shè)置背景圖片,可以讓網(wǎng)頁更加美觀,更加符合設(shè)計(jì)需求。
/* CSS圖片背景鋪滿 */ body { background-image: url('img/background.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
上面的代碼首先設(shè)置了背景圖片的路徑,然后使用了background-size屬性來設(shè)置圖片鋪滿整個(gè)頁面。background-position屬性用來調(diào)整圖片在頁面中的位置,這里將其設(shè)置為居中顯示。background-repeat屬性設(shè)置為不重復(fù)。
如果需要讓圖片在頁面中呈現(xiàn)全屏效果,可以使用如下代碼:
/* 圖片全屏顯示 */ body { background-image: url('img/background.jpg'); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; }
上面的代碼中,通過將background-size屬性設(shè)置為100%,將圖片的大小與頁面大小一致,再將background-position屬性設(shè)置為居中顯示即可。需要注意的是,圖片全屏顯示時(shí)需要保證圖片的寬高比與頁面的寬高比相同,否則圖片會(huì)被拉伸變形。