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中无法工作！当然！

有什么建议吗？

Answer 1

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

但是进一步观察，尤其是你对可变颜色方案的评论，或许挂钩RGBA支持对你有用。有一个很好的帖子（包括如何破解IE - 它根本不支持它）：

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

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;
}

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，并使用相同的位置，但在上面设置z-index。这样，你将拥有一个具有所需不透明度的背景，而你的内容因为它在另一个div上，会恰到好处！

减少div上的不透明度而不降低内容的不透明度

3 个答案: