background-color は、背景色を指定するプロパティです。このプロパティの値に transparent を指定すると、背景を透明にすることができます。
インラインフレームの背景を透過させたい場合は、インラインフレームに読み込まれるページにこのスタイルを設定します。
この指定を行うと、メインページの背景の設定がインラインフレーム内にも適用されるようになります。
body {
background-color: transparent;
}
※上記のスタイルは、インラインフレームに読み込まれるページに対して指定します。
| background-color | transparent を指定します |
|---|
■IEの場合
IEでも透過させたい場合は、このスタイルの指定に加えて以下の指定を行います。
<iframe src="example.html" allowtransparency="true"> 〜 </iframe>
上記のように、iframe要素に allowtransparency="true" を加えます。
詳しくは、HTMLタグの「インラインフレームの背景を透明にする」をご覧ください。
Netscapeの対応はバージョン7で確認しましたが、もしかすると6でも対応しているかもしれません。Operaはバージョン8で確認しましたが、まだ対応していないようで透過はされませんでした。
■インラインフレームを指定するページ
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
div {
background: #ffffff url(image/back.gif);
}
iframe {
width: 300px;
height: 150px;
}
-->
</style>
</head>
<body>
<div>
<p><iframe src="example.html">サンプル</iframe></p>
<p><iframe src="example.html" allowtransparency="true">サンプル</iframe></p>
</div>
</body>
</html>
■インラインフレームに読み込まれるページ（example.html）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
body {
background-color: transparent;
color: #cc0000;
}
-->
</style>
</head>
<body>
<p><strong>読み込まれるページ</strong></p>
<p>iframeサンプル</p>
<p>iframeサンプル</p>
・
・
</body>
</html>
▼これをブラウザで見ると次のように表示されます
