使用视频作为div的背景 [英] use video as background for div

问题描述

我想在CSS3中使用视频作为背景。我知道没有背景视频属性，但是可以做这种行为。使用全尺寸视频标签无法提供所需结果，因为需要在视频上显示内容。

I would like to use a video as background in CSS3. I know that there is no background-video property, but is it possible to do this behavior. Using a fullsize video-tag doesn't give the wanted result, cause there is content that need to be displayed over the video.

它必须是非JS。如果不可能，那么我需要在我的服务器上进行更改，结果也是视频的屏幕截图。

It need to be non JS. If it is not possible then I need to do changes on my serverside an give as result also a screenshot of the video.

我需要视频来替换彩色框：

I need the video to replace the colored boxes:

彩色框只是atm，CSS框。

The colored boxes are atm just, CSS boxes.

推荐答案

为什么不修复< video> 并使用 z-index：-1 将其置于所有其他元素后面？

Why not fix a <video> and use z-index:-1 to put it behind all other elements?

html, body { width:100%; height:100%; margin:0; padding:0; }

<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
    <video id="video" style="width:100%; height:100%">
        ....
    </video>
</div>
<div class='content'>
    ....

演示

如果您想在容器中使用它，则必须添加容器元素还有一点CSS

If you want it within a container you have to add a container element and a little more CSS

/* HTML */
<div class='vidContain'>
    <div class='vid'>
        <video> ... </video>
    </div>
    <div class='content'> ... The rest of your content ... </div>
</div>

/* CSS */
.vidContain {
    width:300px; height:200px;
    position:relative;
    display:inline-block;
    margin:10px;
}
.vid {
    position: absolute; 
    top: 0; left:0;
    width: 100%; height: 100%; 
    z-index: -1;
}    
.content {
    position:absolute;
    top:0; left:0;
    background: black;
    color:white;
}

演示

这篇关于使用视频作为div的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！