在網(wǎng)頁(yè)設(shè)計(jì)中，人們常常用到各種動(dòng)態(tài)效果，其中視頻背景是一種非常酷炫的方式，可以讓網(wǎng)站更加生動(dòng)有趣。下面我們將介紹如何使用CSS來將視頻作為背景。

首先，我們需要準(zhǔn)備一個(gè)視頻文件，并用HTML的video標(biāo)簽來將其插入到網(wǎng)頁(yè)中。在這個(gè)標(biāo)簽里，我們需要指定視頻的源文件及其格式：

<video autoplay loop muted poster="static_image.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>

autoplay屬性讓視頻自動(dòng)播放，loop屬性讓視頻循環(huán)播放，muted屬性讓視頻靜音，poster屬性則是播放按鈕或圖片的URL地址，如果瀏覽器不支持播放，則會(huì)顯示該圖片。同時(shí)需要指定多種視頻格式，以便不同瀏覽器支持。

接著，我們需要使用CSS來將視頻作為背景。這里需要用到position屬性、z-index屬性及::before偽元素。首先，我們需要禁止body標(biāo)簽的滾動(dòng)條顯示：

body {
overflow: hidden;
}

然后，我們給body添加一個(gè)偽元素，并設(shè)置為fixed定位，覆蓋整個(gè)窗口，再將視屏放入其中：

body::before {
content: "";
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -2;
}

其中，content屬性表示偽元素里的內(nèi)容為空，background屬性則用來顯示瀏覽器不支持播放時(shí)的灰色背景，需要自己定義顏色及透明度。然后，我們將video元素設(shè)置為絕對(duì)定位，居中對(duì)齊，并將z-index屬性設(shè)置為-2，以便讓偽元素顯示在視頻之下。

至此，我們就成功地將視頻作為背景了。可以根據(jù)自己的需要進(jìn)行調(diào)整，比如設(shè)置視頻的寬高、居左或居右等等，讓網(wǎng)頁(yè)更加華麗。