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 を生成する方法 (自己増分、一意、不規則)
推薦する
Linux のネイティブ openjdk をアンインストールして sun jdk をインストールする方法
参照: https://www.jb51.net/article/112612.htmシステム内のJ...
jsBridgeの動作メカニズムを1つの記事で学ぶ
目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...
SQL重複排除方法の概要
SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...
Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析
1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...
docker-compose を使用して Apollo カスタム環境をデプロイする詳細なチュートリアル
目次アポロ コンフィギュレーション センターとは何ですか?アポロの特徴クライアントアーキテクチャアー...
Vue プロジェクトで SVG コンポーネントをパッケージ化して構成する手順
最近新しい会社に入社しました。プロジェクトに携わった後、タイトルアイコンが svg で作られていると...
mysql MGR シングルマスターとマルチマスターモードの切り替えの知識ポイントの詳細な説明
メインライブラリの実行 CREATE DATABASE test CHARACTER SET utf...
Apache Web サーバーを使用して 2 つ以上のサイトを構成する方法
人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...
Zabbixについて管理者ログインパスワードを忘れた場合、パスワードをリセットする
Zabbix 管理者ログイン パスワードのリセットに関する問題は次のとおりです。 1. 問題の説明:...
Dockerコンテナにnginxを簡単にデプロイするプロセスの分析
1. コンテナにnginxサービスをデプロイするcentos:7 イメージはコンテナを実行し、このコ...
dockerでlnmp環境を構築する方法
プロジェクトディレクトリを作成する php ディレクトリをコピーする次のプロジェクト構造を作成します...
MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)
この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...
Zabbixで指定時間内の変化値を設定する方法の詳細な説明
背景説明: 既存の負荷分散装置には、付加価値状態にある指標があります (増加するだけで減少しないため...
MySQL の結合インデックスと左端一致原則の詳細な説明
序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...
mysql のファイル mysql-bin.000001 とは何ですか? 削除できますか?
ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...