Question

我遇到了在视频背景上有半透明背景色的问题。即使我将视频的z-index设置为小于主页的z-index的z-index。尽管我设置的背景颜色根本不显示，但视频仍然显示，即使它是半透明的。有人可以解释为什么会这样，并给出解决这个问题的方法吗？请注意，当我删除视频背景时，透明背景颜色应该正常运行。

这是HTML：

<body class="text_background">
 <div id="nav_bar">
  <h1>Foo</h1>
  <ul>
   <li><a href="foo.html">Foo</a></li>
   <li><a href="bar.html">Bar</a></li>
   <li><a href="baz.html">Baz</a></li>
   <li><a href="qux.html">Qux</a></li>
  </ul>
 </div>
 <p>Foo Bar</p>
 <h2>Hello World</h2>
 <div>
  <video id="vid_background" autoplay loop>
   <source src="videos\foo.mp4" type="video/mp4">
  </video>
 </div>
</body>

这是CSS：

.text_background {
 background-color: rgba(0, 255, 200, 0.5);
 z-index: 1;
}
#vid_background {
 position: absolute;
 top: 0px;
 left: 0px;
 min-width: 100%;
 min-height: 100%;
 z-index: -1;
}
#nav_bar ul, #nav_bar ul li, #nav_bar h1 {
 display: inline-block;
}
#nav_bar ul {
 float: right;
}
#nav_bar ul li {
 border: 1px solid black;
}
#nav_bar a {
 color: black;
}

Answer 1

因为你不能减少身体的z-index。因此，您必须创建新的div标签并覆盖所有页面以使其固定...
这是HTML：

<body>
 <div class="text_background">
 </div>
 <div class="content">
  <div id="nav_bar">
   <h1>Foo</h1>
   <ul>
    <li><a href="foo.html">Foo</a></li>
    <li><a href="bar.html">Bar</a></li>
    <li><a href="baz.html">Baz</a></li>
    <li><a href="qux.html">Qux</a></li>
   </ul>
  </div>
  <p>Foo Bar</p>
  <h2>Hello World</h2>
 </div>
 <div>
  <video id="vid_background" loop>
   <source src="videos\foo.mp4" type="video/mp4">
  </video>
 </div>
</body>

这是CSS：

#vid_background {
 position: absolute;
 top: 0px;
 left: 0px;
 min-width: 100%;
 min-height: 100%;
 z-index: -2;
}
#nav_bar ul, #nav_bar ul li, #nav_bar h1 {
 display: inline-block;
}
#nav_bar ul {
 float: right;
}
#nav_bar ul li {
 border: 1px solid black;
}
#nav_bar a {
 color: black;
}
.text_background {
 background-color: rgba(0, 255, 200, 0.5);
 position: fixed;
 z-index: -1;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
}
.content {
	z-index: 1;
}

Answer 2

将类说明符移动到新的<div>标记中解决了问题。

<body>
 <div class="text_background">
 <div id="nav_bar">
  <h1>Foo</h1>
  <ul>
   <li><a href="foo.html">Foo</a></li>
   <li><a href="bar.html">Bar</a></li>
   <li><a href="baz.html">Baz</a></li>
   <li><a href="qux.html">Qux</a></li>
  </ul>
 </div>
 <p>Foo Bar</p>
 <h2>Hello World</h2>
 <div>
  <video id="vid_background" autoplay loop>
   <source src="videos\foo.mp4" type="video/mp4">
  </video>
 </div>
 </div>
</body>

视频作为背景完全覆盖半透明背景颜色

2 个答案: