Question

我想显示页面灰显的注册表单，包含表单的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的不透明度也会改变，如何解决问题？

Answer 1

将iframe从封面5中取出并用绝对位置定位。在这种情况下，您无需触摸iframe的不透明度

Answer 2

因为你的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;

Answer 3

正如Huangism所提到的，你可以保持＃cover5风格，移除＃cover5 div的外部，并将绝对定位应用于iframe，使其居中于屏幕上。

具体来说，到了

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

确保您将边距偏移容器的宽度和高度的HALF，在这种情况下：

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/

Answer 4

在父级而非子级上使用不透明度的方法不是使用不透明度而是使用 Alpha通道（RGBa）。

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

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

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

Answer 5

jquery实现将是：

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

-

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

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

5 个答案: