不透明度在浏览器中变得透明

Question

我再次坚持不透明度问题。我试过这样的事情：

 var hiddenSection = $('div.hidden');
 hiddenSection.show()
        .css({ 'display': 'block' })
        .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
        .css({ top: ($(window).height() - hiddenSection.height()) / 2 + 'px',left: ($(window).width() - hiddenSection.width()) / 2 + 'px'})
        .css({ 'background-color': '#333333', 'filter': 'alpha(opacity=70)', 'opacity': '0.7' })
        //.css({ 'background-color': 'rgba(105,105,105,0.8)' })
        .appendTo('body');

这个东西在IE8上工作得很好但是在Chrome，Firefox中我得到了这个结果：

截图：

它完全变得透明，但我不想让弹出透明。我可以解决这个问题吗？

非常感谢任何帮助。

Answer 1

将不透明度应用于不透明度反映在所有子元素上的元素时。这就是为什么你的弹出内容也是透明的。

IE8（http://caniuse.com/#feat=css3-colors）不支持CSS3颜色，否则rgba对此示例非常有用。

background: rgba(51, 51, 51, 0.7); /* Red, Green, Blue, Alpha */

我想只有颜色＃333333的图层应该是透明的？将注释框移到该div之外，并将其置于浏览器窗口中心。这样，不透明度将不适用于弹出元素。

标记这样的东西：

<div class="hidden">
  <div class="comment-box">Comment box content</div>
  <div class="overlay"></div>
</div>