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

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>