我有一个 index.html，它有一个视频背景、一个 threejs 模型和四个 Angular 的链接。我现在想使用这个例子添加一个灯箱画廊页面:
https://codepen.io/gschier/pen/HCoqh
我可以获得正确的位置，但画廊/行 div 背景是不透明的而不是透明的。我希望它是透明的，以便用户可以看到背景。请注意，如果我移动 <video>尽管 z-index 更高，但在 .html 文件中的画廊 div 上方，视频遮盖了图像；我觉得这可能与问题有关。我在这里做错了什么？
如果我将它缩减为只有一张图片，那么通过屏幕截图很容易看出问题所在:
html, body, .overlay, .container, #video {
width:100%;
height:100%;
}
body {
margin:0;
overflow:hidden;
}
.container {
position:static;
}
#video {
position:absolute;
z-index:0;
object-fit:fill;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
.upper-right {
right:0;
top:0;
}
.lower-right {
right:0;
bottom:0;
}
.upper-left {
left:0;
top:0;
}
.lower-left {
left:0;
bottom:0;
}
.link-text {
z-index:3;
position:absolute;
color:white;
font-family:'Helvetica';
font-weight:bold;
margin:20px;
font-size:larger;
}
.gallery {
z-index:4;
position:static;
}
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}<!DOCTYPE html>
<html>
<head>
<title>kc</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="gallery">
<div class="row">
<!-- thumbnail image wrapped in a link -->
<a href="#img1">
<img src="img/1.png" class="thumbnail">
</a>
<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img1">
<img src="img/1.png">
</a>
</div>
</div>
<video loop autoplay muted id="video">
<source src="clouds.mp4" type="video/mp4">
</video>
<a class="upper-right link-text">
upper-right
</a>
<a class="lower-right link-text">
lower-right
</a>
<a href="gallery.html" class="upper-left link-text">
gallery
</a>
<a class="lower-left link-text">
lower-left
</a>
</div>
</body>
</html>最佳答案
我想通了。我必须将图库 position 设置为 relative。显然 static 元素会忽略 z-index。
关于html - 为什么div背景不透明？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54374079/