我在视频背景之上显示内容时遇到问题。我为背景视频和应该出现在它上面的 div 设置了正确的 z-index，但它不起作用。我应该怎么做才能在视频顶部显示内容？
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="css/video.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8" />
<meta name=”description” content=”” />
</head>
<body>
<div class="wrapper">
<div class="button">HELLO</div>
</div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="img/splash.webm" type="video/webm">
<source src="img/splash.mp4" type="video/mp4">
<source src="img/splash.ogv" type="video/ogg ogv"; codecs="theora, vorbis"/> Video not supported </video>
</body>
</html>
CSS:
.wrapper {
width: 960px;
height: 100%;
z-index: 20;
}
.button {
z-index: 20;
width: 300px;
height: 300px;
}
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden
}
最佳答案
Solution to content on top of video background:
编辑:
除了嵌入另一个视频外，我不需要更改您的任何 css 代码，因此您似乎已经可以使用它了。让我知道这是否是您需要的。
关于css - 在视频背景之上显示内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17386715/