影响整个页面的正文不透明度



我正在制作一个弹出窗口。我已经完成了所有工作,但是当我想将它后面的任何内容的不透明度(我使用body标签)设置为0.6时,弹出窗口的不透明度也会改变。我如何做到这一点,除了弹出窗口的不透明度之外的所有内容都被丢弃了?- 提前感谢:)

尝试使用 rgba 而不是不透明度:

background-color: rgba(0, 0 , 0, 0.5);

它是:红色,绿色,蓝色,阿尔法透明度值

好吧,我对这个问题很好奇,并在 Stack Overflow 的某个地方发现子元素的不透明度永远不会高于其父元素,也不能覆盖它(不是"官方"来源,但我相信它)。

因此,我看到的最佳解决方法是将弹出窗口放在低不透明度元素之外。由于将弹出窗口放在<body>外面是没有意义的,我将所有内容包装在一个div中并将弹出窗口放在外面。例如:

我无法在 JSFiddle 中显示正文标签,但无论如何这是链接 http://jsfiddle.net/qWRj5/1/

<body>
<div id="all">Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu 
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu 
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu 
Difirenziatum Tiramisu. 
</div>
<div id="popup">My Gosh, that is some awful Latin</div>
</body>

.CSS

#all { opacity: 0.5 }
#popup { padding: 10px; border: 2px dotted blue; position: absolute; left: 20px; 
  top: 10px; background-color: #fce; }

最新更新