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 ..

 <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属性接受视频为有效网址。它们只能将位图，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元素进行类似的方法。希望它有所帮助。

Answer 2

试试吧。

DEMO

.page-section video{

position: fixed;
right: 0;
bottom: 0;
top:0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;

}

如何在Div的背景中添加项目目录中的视频

2 个答案: