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 を生成する方法 (自己増分、一意、不規則)
推薦する
MySQL ロック関連知識のまとめ
MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...
JavaScriptの再帰の詳細
目次1. 再帰とは何ですか? 2. 再帰を使って数学の問題を解く1. 1 * 2 * 3 * 4 …...
Alibaba Cloud Server の詳細な展開 (グラフィック チュートリアル)
最近、Web 開発のフロントエンドとバックエンドの技術を学んだので、その後の管理を容易にするためにプ...
Vue 3 での watch と watchEffect の新しい使い方
目次1. 時計の新しい使い方1.1. ウォッチの使用構文1.2. 複数の属性値を監視する1.3. 参...
MySQL ベースのシーケンス実装方法
チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...
Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)
目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...
HTML の META タグの使用に関するヒントの例
HTML メタタグHTML メタタグは、Web ページのコンテンツに関する情報をブラウザや検索エンジ...
MySQL 無料インストール版 (zip) のインストールと設定の詳細なチュートリアル
この記事では、MySQL無料インストール版（zip）のインストールと設定のチュートリアルを参考までに...
カタツムリ映画システムのDocker展開の詳細なプロセス分析
環境に関する声明ホストOS: Cetnos7.9 最小インストールdocker バージョン: 20....
fileReader 使用時の落とし穴と解決策
目次fileReader に関する落とし穴iOS における FileReader の落とし穴 (イメ...
JavaScriptはフォームデータの非同期取得を実装します
この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...
iframeフレームはIEブラウザで白い背景を透明に設定します
最近、プロジェクトを進める過程で、ページの階層構造を描画するために iframe を頻繁に使用する必...
Linux仮想マシンを作成し、仮想マシンネットワークを設定する方法に関するVMwareの詳細なチュートリアル
VMware で Linux 仮想マシンを作成し、VMware と仮想マシンのネットワークを設定する...
モバイルフロントエンド適応ソリューション（概要）
ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...
Ubuntu 20.04 に GitLab をインストールして設定する方法
導入GitLab CE または Community Edition は、主に Git リポジトリのホ...