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 を生成する方法 (自己増分、一意、不規則)
推薦する
シンプルなウェブ計算機を実装するJavaScript
背景私は新しいプロジェクト チームに配属されたので、プロジェクトでは js を使用する必要があります...
面接で聞かれる可能性のあるCSSに関する質問
この記事は、100 回書かれ、質問された CSS の質問を記念するためのものです。聞く： CSS セ...
Vue データの応答性の概要
データの応答性について話す前に、Vue はデータに対して具体的に何を行うのかという非常に重要な問題を...
MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策
lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...
TypeScript 名前空間のマージの説明
目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...
Vueは携帯電話のカメラとアルバムを呼び出す機能を実装します
この記事では、携帯電話のカメラとアルバムにアクセスするためのVueの具体的なコードを参考までに共有し...
MySql はコミットする必要がありますか?
MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...
MySql マスタースレーブレプリケーションの実装原理と構成
データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...
JavaScriptで計算機機能を実現するプロセスの詳細な説明
目次1. 電卓機能の紹介2. 計算機ページのデザイン1. ナビゲーションバー2. データ部分3. i...
Linux の権限管理コマンド (chmod/chown/chgrp/unmask) の詳細な説明
目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...
Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明
序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...
Vueデータ監視の原理の詳細な説明
<本文> <div id="ルート"> <h1&...
JavaScript で配列遅延評価ライブラリを実装する方法
目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...
Centos7 に yum 経由で MySQL をインストールする方法
1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...
Dockerディスク容量不足の問題を解決する
Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...