Html 在嵌入的视频上覆盖透明背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31428660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlaying a transparent background on an embedded video
提问by Simeon
I've a video which I've embedded in a fullwidth div panel. I'm trying to overlay a gradient on top of it, but I can't make it work. I've tried adjusting z-index, wrapping the video in another div, and - as below - adding an overlay class, but I must be missing something obvious.
我有一个嵌入在全宽 div 面板中的视频。我试图在它上面叠加一个渐变，但我不能让它工作。我试过调整 z-index，将视频包装在另一个 div 中，并且 - 如下所示 - 添加一个覆盖类，但我必须遗漏一些明显的东西。
Whatever I try, the video jumps back on top of the other panels (which end up falling behind it).
无论我尝试什么，视频都会跳回到其他面板的顶部（最终落在它后面）。
Would be so grateful for your help!
非常感谢您的帮助！
<div class="videoContainer hide-for-small-only">
<div class="overlay"></div>
<video autoplay loop muted>
<source src="<?=URL?>public/videos/vid.mp4" type="video/mp4">
<source src="<?=URL?>public/videos/vid.webm" type="video/webm">
</video>
</div>
My css is:
我的CSS是：
.videoContainer
{
position: absolute;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 5px;
background-attachment: scroll;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
.videoContainer overlay {
background: black;
opacity: 0.5;
position: absolute;
z-index: 1;
text-align: center;
margin: 0%;
}
回答by KiiroSora09
Here is a fiddle
这是一个小提琴
I used green overlay for the demo.
我在演示中使用了绿色叠加层。
CSS
CSS
.videoContainer {
position: relative;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 5px;
background-attachment: scroll;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: relative;
z-index: 1;
}
.videoContainer .overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: green;
opacity: 0.5;
}
回答by Luis Antonio Canettoli
I came across this very same issue and eventually managed to get an aesthetically similar effect simply setting the video with opacity:0.5over a colored background.
我遇到了同样的问题，并最终设法获得了美学上相似的效果，只需将视频设置opacity:0.5为彩色背景即可。
.vid-bg {
opacity: 0.5; /* ! */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%
}<body style="background-color: green">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="vid-bg">
<source src="http://inserthtml.com/demos/javascript/background-videos/flowers.mp4" type="video/mp4">
</video>
</body>