サイト内検索

...HTML・XHTMLタグ...

インラインフレーム

背景を透明に

背景を透明にするには、iframe要素にallowtransparency属性を指定します。
[使い方]
<iframe src="sample.html" allowtransparency="true">
インラインフレームに読み込まれるページのbody要素に、
<body style="background-color: transparent;">
↑のようにスタイルシートで指定しておきます。
[メモ・・・W3Cの検証サービス・・・]
HTML 4.01 Strict ・ XHTML1.0 Strictでは推奨されていません。
属性 属性値 説明
allowtransparency="true"背景を透過します。
"false"背景を透過しません。(標準値)

サンプル

《メインページ(インラインフレームを指定するページ)》

[bodyの中]

<body background="img/img.gif" bgcolor="#ffffff" text="#000000" >
<iframe src="inrain.html" width="300" height="150" allowtransparency="true">
サンプル
</iframe>

メインのページには背景画像を指定します。


</body>

《インラインフレームに読み込まれるページ(inrain.html)》

透過に対応しているブラウザでは、
インラインフレームの中にも背景画像が表示されます。

<html>
<head>

<title>インラインフレーム</title>

</head>

<body style="background-color: transparent;">

</body>
</html>

[ブラウザ上]

サンプルページは、こちら

Copyright c 2007.10.01 luc All rights reserved.