Question

我有一个index.html，它具有视频背景，Threejs模型和四个角的链接。我现在想使用以下示例添加灯箱画廊页面： https://codepen.io/gschier/pen/HCoqh 我可以得到适当的位置，但是gallery / row div背景是不透明的，而不是透明的。我希望它是透明的，以便用户可以看到背景。请注意，如果我将<video>移动到.html文件中的画廊div上方，尽管z索引较高，但视频仍会遮挡图像。我感觉可能与问题有关。.我在这里做错什么了？

如果我将其缩小为一张图像，则可以通过屏幕截图轻松看到问题：

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>

Answer 1

我知道了。我必须将画廊position设置为relative。显然static个元素会忽略z-index。

为什么div背景不透明？

1 个答案: