background-color: transparent;
- ブラウザ
- 特性
- background-color
background-color は、背景色を指定するプロパティです。
インラインフレーム内の文書にこのプロパティ（値 transparent）を設定すると、インラインフレームの背景を透過させることができます。
body {
background-color: transparent;
}
※上記のスタイルは、インラインフレームに読み込まれる文書に対して設定します。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background-color | transparent | 透明 （初期値） |
Firefox、Safari、Chromeは、この指定がなくても透過されます。（IEやOperaではこの指定が必要です）
【IEでの透過方法】
IEの場合は、このプロパティの設定に加えてallowtransparency属性の指定が必要になります。
<iframe src="example.html" allowtransparency="true"> 〜 </iframe>
上記のように、iframe要素に allowtransparency="true" を加えます。
※詳しくは、HTMLリファレンスの「インラインフレームの背景を透過する」をご覧ください。
使用例
■インラインフレームを設定する文書
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div {
padding: 20px;
background: #ffffff url(neko.gif);
color: #000000;
}
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>文書のタイトル</title>
<style type="text/css">
body {
background-color: transparent;
color: #000000;
}
h1 {
font-size: 100%;
}
p {
margin-top: 30px;
}
</style>
</head>
<body>
<h1>読み込まれる文書</h1>
<p>iframeサンプル</p>
<p>iframeサンプル</p>
...
</body>
</html>
表示例
- サイト内検索
