0

我正在制作一个弹出窗口。我已经完成了所有工作，但是当我想将其后面的任何东西（我使用 body 标签）的不透明度设置为 0.6 时，弹出窗口的不透明度也发生了变化。我如何做到这一点，除了弹出窗口的不透明度之外的所有内容都被丢弃？- 提前致谢 ：）

4

2 回答 2

3

尝试使用 rgba 代替不透明度：

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

它是：红色、绿色、蓝色、alpha 透明度值

于 2012-05-03T23:12:06.057 回答
1

好吧，我对这个问题很好奇，并在 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; }

​</p>

于 2012-05-03T23:10:35.227 回答