CSS中背景的樣式可以使用圖片、顏色等方式來設(shè)置，但是你是否想過用視頻作為背景呢？今天我們就來學(xué)習(xí)如何在CSS中使用視頻作為背景。

body {
background: url('video.mp4') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

上面的代碼中，我們使用了CSS3中的新屬性background-size來調(diào)整視頻背景的大小以適應(yīng)視窗。需要注意的是，不同的瀏覽器需要添加不同的瀏覽器前綴來兼容。

如果你想要視頻循環(huán)播放，可以使用下面的代碼：

body {
background: url('video.mp4') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-animation: fadein 2s linear 0s infinite;
-moz-animation: fadein 2s linear 0s infinite;
-ms-animation: fadein 2s linear 0s infinite;
-o-animation: fadein 2s linear 0s infinite;
animation: fadein 2s linear 0s infinite;
}
@keyframes fadein {
0% { opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}

使用上面的代碼可以讓視頻循環(huán)播放，并加入淡入淡出的效果。

使用視頻作為背景可以讓網(wǎng)頁更具動(dòng)態(tài)感，但也需要注意視頻文件大小不要過大，否則會(huì)影響網(wǎng)頁速度。