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