在網(wǎng)頁中，我們經(jīng)常會(huì)使用圖片作為背景，但是你知道嗎？CSS3還可以讓你的背景是一段視頻！下面我們來看看如何實(shí)現(xiàn)背景為視頻的效果：
body {
margin: 0;
padding: 0;
background-color: #333;
background-image: url("videos.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}首先，將body的背景設(shè)置為一張圖片，這個(gè)圖片會(huì)成為視頻播放前的封面。
.video-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.video-container video {
min-width: 100%;
min-height: 100%;
}接下來，我們?cè)贖TML中建立一個(gè)
用于存放video，將其定位到正中央，然后將video的寬高設(shè)為100%。需要注意的是，由于video會(huì)在.body的下層，因此需要將.video-container的z-index設(shè)為-1，以避免遮擋導(dǎo)致視頻無法正常播放。
完成以上兩步后，我們只需要在
中插入一個(gè)video元素就可以了：
注意，我們要將video的autoplay、loop、muted屬性都設(shè)為true，這樣可以使視頻自動(dòng)播放，循環(huán)播放，同時(shí)靜音以保證良好的用戶體驗(yàn)。
完成了上面的HTML和CSS后，我們還需要準(zhǔn)備一個(gè).mp4格式的視頻文件，用于視頻的播放。視頻文件的路徑和文件名需要和HTML代碼中的
現(xiàn)在，我們就成功做出了一個(gè)背景為視頻的效果！
下一篇css保持多列相同高度