CSS壁紙全屏顯示是一種讓網(wǎng)頁背景圖片充滿整個屏幕的效果,可以讓頁面更具藝術(shù)感,下面是CSS代碼實現(xiàn)全屏壁紙顯示。
html, body { height: 100%; } body { background-image: url("圖片地址"); background-size: cover; background-position: center; background-repeat: no-repeat; }
上面代碼中首先設(shè)置了網(wǎng)頁的高度為100%,為了讓背景一直充滿整個屏幕。然后在body標(biāo)簽中設(shè)置了背景圖片的地址,background-size:cover表示圖片將被縮放到完全覆蓋body元素,而background-position:center表示圖片在豎直和水平方向都居中顯示。最后background-repeat:no-repeat表示圖片不會重復(fù)出現(xiàn)。
如果需要設(shè)置漸變背景,可以將background-image替換為background屬性,代碼如下:
body { background: linear-gradient(to bottom, #000, #fff); }
上面代碼中l(wèi)inear-gradient是CSS3漸變屬性,to bottom表示漸變方向為從上向下,#000和#fff表示顏色值。
通過CSS可以實現(xiàn)各種美麗的背景效果,不同的效果也需要不同的CSS屬性來實現(xiàn),希望大家在制作網(wǎng)頁背景時能做出想要的效果。