iframeフレームはIEブラウザで白い背景を透明に設定します
|
最近、プロジェクトを進める過程で、ページの階層構造を描画するために iframe を頻繁に使用する必要があります。ほとんどのブラウザには背景がありませんが、IE では iframe の背景色がデフォルトで白になっています。メインの背景色が白でない場合、この部分は非常に不自然に見えます。解決策はヘルプ マニュアルに記載されており、iframe の allowTransparent 属性を true に設定します。ヘルプ ドキュメントには、次のような対応する例も記載されています。 コードをコピー コードは次のとおりです。<BODY STYLE="背景色: 赤"> <IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"> </IFRAME> <IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" スタイル="背景色: 緑"> </IFRAME> <IFRAME ID="フレーム3" SRC="透明ボディ.htm"> </IFRAME> <IFRAME ID="Frame4" SRC="transparentBody.htm" スタイル="背景色: 緑"> </IFRAME> </本文> 理論的には、これを実行しても問題はありませんが、IE はあまり反応しないようで、背景は白のままです。実際、このステップでは、次に示すように、サブページの <body> タグに <body bgColor="transparent"> も追加する必要があります。 http://img.blog.csdn.net/20140610165850968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva3VucGVuZ19tdWJhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center main.html メインページコード: コードをコピー コードは次のとおりです。<html> <ヘッド> <タイトル></タイトル> </head> <body style="background-color:blue;"> <表 スタイル="幅:100%;境界線:0;高さ:100%;セルパディング:0;セル間隔:0"> <tr 高さ="100%"> <td 高さ="100%" 幅="30%"> <iframe id="test1" src="test1.html" allowTransparency="true" width="100%" height="100%"></iframe></td> <td 高さ="100%" 幅="40%"> <iframe id="test2" src="test2.html" allowTransparency="true" width="100%" height="100%"></iframe></td> <td 高さ="100%" 幅="30%"> <iframe id="test3" src="test3.html" 幅="100%" 高さ="100%"></iframe></td> </tr> </テーブル> </本文> </html> test1.html ページコード: コードをコピー コードは次のとおりです。<html> <ヘッド> <タイトル></タイトル> </head> <body bgcolor="透明"> <h1>テスト1</h1> </本文> </html> test2.html ページコード: コードをコピー コードは次のとおりです。<html> <ヘッド> <タイトル></タイトル> </head> <本文> <h1>テスト2</h1> </本文> </html> test3.html ページコード: コードをコピー コードは次のとおりです。<html> <ヘッド> <タイトル></タイトル> </head> <本文> <h1>テスト3</h1> </本文> </html> この小さな例では、主に iframe タグの allowTransparency 属性を適用しています。この属性が true に設定され、iframe によって読み込まれるサブページの <body> タグの背景色が透明に設定されている場合、iframe は透明になります。 allowTransparency は、オブジェクトを透明にできるかどうかを設定または取得します。 bgColor オブジェクトの背景色を設定または取得します。 |
<<: Nginx がサーバーの生存状態をパッシブにチェックする詳細な説明
>>: MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)
推薦する
ウェブページ上の小さなスペースに大きな画像を配置する方法
出典: www.bamagazine.comウェブページのバナー、ニュースの見出しの周りのスペース、...
Ubuntu で時刻同期に NTP を使用する
NTP は、ネットワーク上で時間を同期するための TCP/IP プロトコルです。通常、クライアントは...
mysql5.7.14 解凍版インストールと設定方法 グラフィックチュートリアル (win10)
Win10はmysql5.7の解凍版をインストールします。参考までに、具体的な内容は次のとおりです...
HTML 描画ユーザー登録ページ
この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...
Webフロントエンドスキル概要（個人の実務経験）
1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...
Linux スワップ パーティション (詳細説明)
目次リナックス1. SWAPとは2. swappiness は何を調節しますか? 3. スワップ操作...
MYSQLについては、データ型と操作テーブルを知る必要があります
データ型と操作データテーブル1.1 MySQL 型: 整数 1.2 MySQL データ型: 浮動小数...
Vueプロジェクトのパッケージ化の詳細な説明
目次1. 関連構成ケース1（使用ツールはvue-cil）ケース2（使用するツールはwebpack） ...
VueにExcelテーブルプラグインを導入する方法
この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...
デザイン理論：人間中心のデザインコンセプト
<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...
MySQL 5.7.21 winx64 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...
Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル
Unix/Linux サービスsystemd サービス操作プロセス1. JDKがインストールされたC...
jsイベント委譲の詳細な説明
1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...
Web面接でよくある質問：リフローとリペイントの原理と違い
目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為：再描画再描画を引き...
シームレスなトークンリフレッシュを実現する方法
目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...