iframe要素に allowtransparency="true" を指定すると、インラインフレームの背景を透過させることができます。
この指定を行うと、インラインフレームを配置している文書の背景が、インラインフレーム内にも適用されるようになります。
<iframe src="example.html" allowtransparency="true"> 〜 </iframe>
| 属性 | 値 | 説明 |
|---|---|---|
| allowtransparency="" | true | 背景の透過を許可する |
| false | 背景の透過を許可しない （初期値） |
上記の属性は、HTML 4.01では定義されていません。
この属性を指定する場合は、事前に以下の設定を行っておく必要があります。
【インラインフレームに読み込まれる文書の設定】
インラインフレーム内に読み込まれる文書のbody要素に、スタイルシートで次の内容を指定しておきます。
<body style="background-color: transparent;">
background-color… 背景色を設定するプロパティtransparent… 透過を指定
allowtransparency属性は、上記の設定内容を有効にするかどうかを指定することになります。
※Firefoxなどでは、この属性を指定しなくても透過の設定が有効になります。
allowtransparency属性はIE5.5以上で対応しています。スタイルシートによる透過方法の詳細は「関連ページ」をご覧ください。
使用例
■インラインフレームを設定する文書
<html>
<head>
<title>文書のタイトル</title>
</head>
<body background="neko.jpg" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<p><iframe src="iexample_f.html" width="300" height="150" allowtransparency="true">代替内容</iframe></p>
<p>この文書に背景画像を設定しています。</p>
</body>
</html>
■インラインフレームに読み込まれる文書 （iexample_f.html）
<html>
<head>
<title>フレーム内の文書</title>
</head>
<body style="background-color: transparent;">
<p>対応しているブラウザでは、このフレーム内にも背景画像が表示されます。</p>
...
</body>
</html>
表示例
- サイト内検索
