Question

我需要用黑色响应层覆盖html5背景视频，并使用一些不透明度（让我们称之为“阴影层”）。不幸的是，我无法选择视频图层的高度，因为它必须绝对定位，因此无法选择父div的高度。

有什么建议吗？ JS绝对不受欢迎。这是代码：

HTML

<div>
    <div class="shadow-layout">
        <div class="content">
            Some content
        </div>
    </div>
    <div id="video-bg">
        <video class="video-bg" autoplay loop poster="">
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
        </video>
    </div>
</div>

CSS

.shadow-layout {
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background: rgba(0,0,0,0.5)
}
.content {
    margin-top: 40px;
    text-align: center;
    color: white;
}
#video-bg, .video-bg {
    width: 100%;
}

...和jsfiddle

Answer 1

尝试将您的CSS更改为此...

.shadow-layout {
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background: rgba(0,0,0,0.5)
}

#video-bg, .video-bg {
   width: 100%;
   height:100%;
   position:absolute;
}

你应该关闭源代码标签......将你的html改为此......

<div>
    <div class="shadow-layout"></div>
    <div id="video-bg">
        <video class="video-bg" autoplay loop poster="">
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"/>
        </video>
    </div>
</div>

在这里工作JSFiddle http://jsfiddle.net/DivakarDass/k7cqprLz/1/

希望您像这样要求该视频的背景。

干杯。

在背景html5视频上的响应性顶片

1 个答案: