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 を生成する方法 (自己増分、一意、不規則)
推薦する
Ubuntu 18.04 Server に静的 IP を設定する方法
1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...
Vue-router プログラムナビゲーションの 2 つの実装コード
ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...
Centos7 に DAMO データベースをインストールするチュートリアル
1. 準備Linux オペレーティング システムをインストールした後、ここで Linux 7 を選択...
vmware14Pro で Ubuntu システム インターフェイスが小さすぎる問題の解決方法の詳細な説明
1. 動作環境vmware14proウブントゥ 16.04LTS 2. 問題の説明vmware14P...
docker+devpi を使用してローカル pypi ソースをビルドする方法
以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...
HTML の iframe と frame の違いを例を使って説明します
プロジェクトで frameset 属性を使用したことがあるかどうかはわかりません。昨年、オンライン ...
MySQL インデックスに関するヒントのまとめ
目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...
MAC 上の MySQL の初期パスワードを忘れた場合の対処方法
MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...
Vue ログインページ用の動的パーティクル背景プラグインの実装
目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...
Docker Desktop をインストールすると、エラー メッセージが表示されます: WSL 2 のインストールが完了していません (エラー メッセージを解決してください)
エラーの説明Docker Desktop をインストールすると、WSL2 (Windows ベースの...
初心者向けMySQLインデックス
序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...
ウェブアニメーションのフレームレートFPSを計算する方法
目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...
IE6 で CSS スタイルの div または li の背景のタイリングと境界の破損を解決する方法
IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...
MySQL インデックスの長所と短所、およびインデックス作成のガイドライン
1. インデックスを作成する理由（メリット）インデックスを作成するとシステムのパフォーマンスが大幅に...
JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明
ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...