已解决-CSS不透明问题（不是儿童DIV）

Question

我在做什么错？

想法：

背景图像
覆盖底部10％的坚实页脚（页脚）
覆盖顶部90％（封面）的半透明矩形

由于某种原因，尽管页脚不是封面的子级，但添加封面div会使页脚为半透明。

抑制封面的“不透明性”也使页脚也不透明。

我尝试在页脚中将不透明度设置为1，但这不会改变任何事情。
我看过使背景本身为半透明（rgba），但我想应用彩色滤镜，而不是白色滤镜。
我尝试通过使用z-index将页脚放在前面，但同样是同样的问题

任何想法如何解决这个问题？

JSFiddle：https://jsfiddle.net/a81x07uk/

<!DOCTYPE html>
<html>
<style>

body{
  background: url("http://1.bp.blogspot.com/-Hjx9f70ASIY/UDiMt1gKaPI/AAAAAAAACXA/QBrC0nootsw/s1600/green.field.wallpaper.2.jpg") no-repeat fixed center;
}

.cover {
  background: green;
  width: 100%;
  height: 90%;
  position: fixed;
  opacity: .5;
  left: 0%;
  top: 0%;
}

.footer {
  background: white;
  width: 100%;
  height: 10%;
  position: fixed;
  bottom: 0%;
  left: 0%;
}

</style>

<body>

<!-- rectangle to cover the picture -->
<div class="cover"/>

<!-- rectangle to cover the bottom part -->
<div class="footer">test</div>

</body>
</html>

Answer 1

您忘记了封面div的结束标签。 div需要一个结束标记。因此，您的页脚确实是被掩盖的孩子。

<html> <style> body{ background: url("http://1.bp.blogspot.com/-Hjx9f70ASIY/UDiMt1gKaPI/AAAAAAAACXA/QBrC0nootsw/s1600/green.field.wallpaper.2.jpg") no-repeat fixed center; } .cover { background: green; width: 100%; height: 90%; position: fixed; opacity: .5; left: 0%; top: 0%; } .footer { background: white; width: 100%; height: 10%; position: fixed; bottom: 0%; left: 0%; } </style> <body>  <div class="cover"></div>  <div class="footer">test</div> </body> </html>

Answer 2

[好的，Anurag钉牢了：<div>不是自动闭合的。正如Fabian所写，这使页脚成为掩盖的孩子。谢谢，这让我发疯了！

已解决-CSS不透明问题（不是儿童DIV）

问题描述投票：-1回答：2

2个回答

最新问题

已解决-CSS不透明问题（不是儿童DIV）

问题描述 投票：-1回答：2

2个回答

最新问题

问题描述投票：-1回答：2