视频作为背景完全掩盖了半透明的背景色

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

这是因为您无法从身体降低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 个解决方案

解决方案1
1 已采纳 2015-10-28 06:10:02

解决方案2
0 2015-10-27 12:47:09

视频作为背景完全掩盖了半透明的背景色

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-10-28 06:10:02

解决方案2 0 2015-10-27 12:47:09

解决方案1
1 已采纳 2015-10-28 06:10:02

解决方案2
0 2015-10-27 12:47:09