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 ルートパスワードを変更する複数の方法 (推奨)
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
HTML テーブル境界コントロールの詳細な説明
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
HTML ページの先頭に戻るいくつかの実装の概要
最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...
MySQL 8.0 をインストールした後、初めてログインするときにパスワードを変更する問題を解決する
MySQL 8.0.16で初回ログイン時のパスワードを変更する方法を紹介します。 MySQLデータベ...
Docker ベースの Tomcat クラスタと Nginx ロード バランシングの展開の概要
目次前面に書かれた1. Ngixnイメージの作成2. Java Web (Tomcat) アプリケー...
Vueの自己ネストツリーコンポーネントの使い方の詳細な説明
この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...
Vue プロジェクトで mock.js を使用するための完全な手順
Vue プロジェクトで mock.js を使用する開発ツールの選択: Vscode 1. コマンドラ...
vsCodeはワンクリックでvueテンプレートを生成します
1. ショートカットCtrl + Shift + Pを使用してコンソールを呼び出します 2、「スニペ...
Docker でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
1. docker.serviceファイルを編集する: : vi /usr/lib/systemd/...
MySQL テーブル作成外部キー エラーの解決方法
データベーステーブルA: テーブル task_desc_tab を作成します （ id INT(11...
今日、今週、今月、先月のMySQLクエリデータ
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
CSSでできるならJavaScriptは使わない
序文JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述さ...
MySQL データベースでよく使用される SQL ステートメントの詳細と概要
この記事では、MySQL データベースでよく使用される SQL ステートメントを例を使用して説明しま...
nginx を使用した負荷分散モジュールの解釈
目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...
ARM64アーキテクチャでmysql5.7.22をインストールするプロセス全体
MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...