0

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

4

5 回答 5

1

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

于 2012-06-20T14:50:47.177 回答
1

因为你的 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;
于 2012-06-20T14:55:29.027 回答
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/

于 2012-06-20T15:02:11.843 回答
0

在父级而不是子级上具有不透明度的方法不是使用不透明度而是使用Alpha 通道(RGBa)。

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

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

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

于 2012-06-20T14:45:03.653 回答
0

一个 jquery 实现将是：

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

--

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

于 2012-06-20T15:00:16.800 回答