在不降低元素内容的透明度的情况下降低div的透明度

Question

想要降低页面内容容器背景的不透明度，而不降低内容的不透明度。

<div id="container">
   <div id="page contents">
   page contents goes here, like amazing articles and all that.
   </div>
</div>

需要能够随内容扩展，因此不能有固定的高度。

将其绝对定位在内容下面意味着两个div之间没有关系，并且不会随内容扩展，所以我认为这是一个死胡同，如有其他建议请随意提出。

不能使用Jquery，因为可能会太卡顿并且不是即时的。请优先考虑其他选项。

可能需要使用“png”背景图像，但希望不要使用，因为它是一个模板，需要根据颜色方案更改颜色。

可以按需生成图像，但并不理想。

哦，最后还不能使用CSS3，因为在IE中无法工作！当然！

有什么建议吗？

- BenHerbert

Answer 1

我的第一个念头是使用透明的PNG。

但是，如果您考虑到可变颜色方案，可能将RGBA支持添加到其中会对您有所帮助。这里有一篇很好的文章（包括如何绕过完全不支持它的IE）：

http://css-tricks.com/rgba-browser-support/

- Oli

Answer 2

尚未测试，但你可以理解这个想法。

<div id="container">
   <div id="page contents">
   <div id="opacity"></div>
   page contents goes here, like amazing articles and all that.
   </div>
</div>

#page {
   position:relative;
}

#opacity {
   position:absolute; z-index:-1; height:100%; width:100%; background-color:#eee; opacity:.7;
}

- koko

Answer 3

一个元素的所有内容都会受到其不透明度值的影响，即使您将内容的不透明度设置为0，仍然会存在问题... 这里是我使用的一个简单解决方案：

HTML

<div id="menu_bg"></div> <!-- BG FOR LEFT MENU -->
<div id="menu_header">
  <span class="menu_title2">MENU PRINCIPAL</span>
  <div id="menu_opts">
    <ul id="menu">
      <li id="menu_home"><a href="#">HomePage</a></li>
      <li id="menu_home"><a href="#">Company</a></li>
    </ul>
  </div>
</div>

CSS：

div#menu_bg {
  position:fixed; top:10px; left:10px; z-index:20000;
  width:200px; height:50px;
  background:#000000;
  /* for IE */ filter:alpha(opacity=60);
  /*CSS3 standard*/ opacity:0.6;
}
div#menu_header {
  position:fixed; top:10px; left:10px; z-index:20001;
  width:200px; height:50px; overflow:hidden; cursor:pointer;
}
div#menu_opts {
  position:absolute; top:60px; left:10px;
  width:200px; height:275px; overflow:hidden;
}

这个技巧很简单，只需要在内容后面放置一个 div，并使用 position 和 z-index 进行定位。然后再画另一个 div，将其放在上一个 div 的上方，并使用相同的位置但设置更高的 z-index。这样，您就可以拥有所需不透明度的背景，并且由于内容位于另一个 div 上，因此会得到完美的效果！

- Zuul