如何使 div 的不透明度低于过度分层的 iframe答案

【问题标题】：how to make opacity of div lower than the over layered iframe如何使 div 的不透明度低于过度分层的 iframe
【发布时间】：2012-06-20 23:02:11
【问题描述】：

我想显示注册表单，其中页面显示为灰色，并且包含该表单的 iframe 显示在中间，如下所示：

代码：

<div id="cover5">
    <iframe name="warning" src="SignIn.php" id="warning" style="position: relative; height: 250px;">
     </iframe>
</div>

css：

#cover5 {
    position:absolute;
    top:0px;
    left:0px;
    overflow:hidden;
    display:none;
    width:100%;
    height:100%;
    background-color:gray;
    text-align:center;
    opacity: 0.5;
}

#warning {
    border-radius: 20px;
    top: 150px;
    margin:auto;
    position:relative;
    width:600px;
    height:fit-content;
    background-color:white;
    color:black;
    padding:10px;
    border: 5px solid #003366;
    opacity: 1;
}

我希望封面（div）的不透明度低（背景模糊），而 iframe 不应该被模糊，问题是当我改变 div 的不透明度时，iframe 的不透明度也会改变，怎么解决？

【问题讨论】：

标签： javascript jquery css opacity

【解决方案1】：

正如 Huangism 所说，您可以保留 #cover5 样式，移除 #cover5 div 的外部并将绝对定位应用于 iframe 以使其在屏幕上居中。

具体来说，

top: 50%;
left: 50%;
position: absolute;

只需确保将边距偏移容器宽度和高度的一半，在这种情况下：

margin: -125px 0 0 -300px; /* The height is 250px and the width is 600px */

您的标记将如下所示：

<div id="cover5"></div>

<iframe name="warning" src="SignIn.php" id="warning" style="position: relative; height: 250px;"></iframe>

这是一个 jsFiddle 示例：http://jsfiddle.net/VxntD/

【讨论】：

【解决方案2】：

将iframe从cover5中取出，并用absolute定位。在这种情况下，您不需要触摸 iframe 的不透明度

【讨论】：

【解决方案3】：

因为您的 iframe 嵌入在 cover5 中，所以会受到 cover5 不透明度的影响。据我所知，没有办法解决这个问题。我尝试设置 z-indexs 和其他显示设置，但没有任何效果。

但是，由于您的 cover5 div 是绝对定位的，而您的警告不是，请将您的标记更改为此，这应该可以解决您的问题；

<div id="cover5"></div>
<iframe name="warning" src="SignIn.php" id="warning" style="position: relative; height: 250px;"></iframe>

另外，opacity 不支持跨浏览器，因此您的 css 应该包含这些其他规则；

-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter:alpha(opacity=50);
opacity:.50;

【讨论】：

【解决方案4】：

在父级而不是子级上设置不透明度的方法是不使用不透明度，而是使用 alpha 通道 (RGBa)。

警告：旧版浏览器不支持 RGBa。

background-color:rgba(128,128,128,.5);

见：http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/

【讨论】：

【解决方案5】：

一个 jquery 实现将是：

$(document).ready(function() {
    $('#cover5').animate({opacity: 0.5},1000); // which changes opacity smoothly
});

--

在此处查看带有不透明动画效果的代码的工作演示：http://jsfiddle.net/teFYa/

【讨论】：