html - 如何在Div后台添加元素目录下的Video

Question

我有一个 div，我想在其中像图像一样在背景中添加视频，但我不知道该怎么做。这是我想添加视频的 CSS。

.page-section {
    width: 100%;
    min-height: 800px;
    padding: 50px 0;
    border-bottom: 2px solid #fff;
}

.page-section#intro {
   min-height: 400px;    
}

这是 HTML 分区..

 <div class="page-section">
 </div>

我试过添加这样的视频，但它不起作用..

.page-section#intro {
min-height: 400px;
background: url(Video/Sapno.MP4) bottom center no-repeat;
}

请帮我将css中的视频添加到Div的背景中..

Answer 1

@Hansal，我不认为 background 属性接受视频作为有效 url。它们只能将位图、SVG 图像、颜色和渐变作为值——可以通过将其置于其他 HTML 元素之后来伪造背景视频的外观。有一个名为 z-index 的属性它负责页面上元素的“深度”。

您可以尝试这样的操作(HTML5 中的简单 video 标签):

 <video autoplay loop poster="foobar.jpg" id="bgvid">
 <source src="foobar.webm" type="video/webm">
 </video>

您可以像这样设置 video 标签的样式:

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(foobar.jpg) no-repeat;
}

这里，css 的基本部分是将此元素的 z-index 设置为 -100，以确保它保持在背景允许其他元素出现在它上面。您可以对相应的 html 元素尝试类似的方法。希望对您有所帮助。