在不降低内容不透明度的情况下降低 div 的不透明度答案

【问题标题】：Reducing the opacity on a div without reducing the opacity of the contents在不降低内容不透明度的情况下降低 div 的不透明度
【发布时间】：2010-05-28 20:02:31
【问题描述】：

希望在不降低内容不透明度的情况下降低页面内容容器背景的不透明度。

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

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

将其绝对定位在内容下方意味着两个div之间不会有任何关系，并且不会随着内容而扩展，所以我认为这是一个死胡同，请随意说。

不能使用 Jquery，因为它可能太迟钝而且不是即时的。请首选其他选项。

可能必须使用“png”背景图片，但希望不要这样做，因为它是一个模板，并且需要能够根据配色方案更改颜色。

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

哦，最重要的是不能使用 CSS3，因为它不能在 IE 中工作！当然！

有什么建议吗？

【问题讨论】：

标签： css opacity

【解决方案1】：

我的第一个冲动是透明 PNG。

但进一步观察，尤其是您对可变配色方案的评论，也许加入 RGBA 支持对您有用。这里有一篇不错的帖子（包括如何破解 IE - 根本不支持它）：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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，并使用相同的位置，但在上面设置 z-index。这样，您将获得具有所需不透明度的背景，并且您的内容（因为它位于另一个 div 上）将变得恰到好处！

【讨论】：