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;
}

iframeをぼかしてはいけないのに、cover（div）の不透明度を低くしたい（背景をぼかした）場合、問題はdivの不透明度を変更すると、iframeの不透明度も変更されることです。問題を解く？

4

5 に答える 5

1

cover5 から iframe を取り出し、absolute で配置します。この場合、iframe の不透明度に触れる必要はありません。

于 2012-06-20T14:50:47.177 に答える
1

iframe は cover5 に埋め込まれているため、cover5 の不透明度の影響を受けます。そして、私が知る限り、これを回避する方法はありません。Z インデックスやその他の表示設定を設定しようとしましたが、何も機能しません。

ただし、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

子ではなく親に不透明度を持たせる方法は、不透明度を使用せず、代わりにアルファチャンネル(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 に答える