<iframe src="" allowtransparency="true"></iframe>

ブラウザ
  • IE
分類
要素

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などでは、この属性を指定しなくても透過の設定が有効になります。

使用例

インラインフレームを設定する文書


<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="250" 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>
表示例

サンプル画面へ新規ウィンドウで表示