隨著HTML5技術(shù)的發(fā)展，背景設(shè)置也更加方便和多樣化了。網(wǎng)頁的背景可以是純色、簡單的圖案、漸變、圖片、視頻等等。下面為大家介紹不同類型的背景設(shè)置方法。

/* 設(shè)置純色背景 */
body {
background-color: #FFC0CB;
}

可以將background-color屬性設(shè)置為顏色的名稱、RGB值、十六進制碼均可。

/* 設(shè)置簡單的圖案背景 */
body {
background-image: url("pattern.png");
}

可以通過指定圖像的路徑設(shè)置圖片背景。圖片需要放在與HTML文件同一目錄下。

/* 設(shè)置漸變背景 */
body {
background: linear-gradient(to bottom right, #FFC0CB, #00FFFF);
}

使用linear-gradient可以設(shè)置漸變背景。其中to bottom right表示漸變方向，#FFC0CB和#00FFFF是起始和終止顏色。

/* 設(shè)置固定背景圖片 */
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
}

可以將background-attachment屬性設(shè)置為fixed，可以固定背景圖片，即不隨頁面滾動而移動。

/* 設(shè)置視頻背景 */

可以插入視頻作為背景。視頻需在video標簽內(nèi)指定，其中autoplay表示自動播放，loop表示循環(huán)播放，muted表示靜音，poster為視頻封面。

HTML5的背景設(shè)置不僅多樣化，還可以通過CSS3的新屬性進行更加自由的設(shè)置。通過不同的設(shè)置，可以使網(wǎng)頁更具吸引力和更加美觀。