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

Question

我运行遇到了在视频背景上使用半透明背景颜色的问题。即使我将视频的 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

将 class 说明符移动到新的 <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>

Answer 2

这是因为你不能减少 body 的 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;
}

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

Video as Background Completely Covering Up Semi-Transparent Background Color

html

css

transparency

background