【CSS】iframeで背景色を取り除こうにもtransparentが機能しないIEでの解決法
この記事は最終更新日から10年以上経過しているため現状にそぐわない可能性もあります。
Amazonのインスタントストアやバナーを自分のブログに取り込もうとするとiframeでの指定になります。
デザインの変更もかろうじてCSSで可能です。かなり面倒くさいですが。
しかしながら元々設定してある<body>の背景カラー"#FFF"を取り除こうとするとどうしてもIEだけが削除できません。
これを他のブラウザ同様、透明にする指定を見つけたので残しておきます。
実装
iframeのbodyに設定してある#FFF（白）の背景カラーが邪魔で取り除きたいんですが、Chromeであれば「background-color」に”transparent”を指定すれば背景カラーが消えてくれます。
ところがIEで見てみると背景は「白」のまま。
何をどうやっても白が消えてくれません。
そこでいつものようにGoogle先生に訊いてみると、下記の要領で消えるとか。
background-colorに transparent を指定。
かつiframe内にallowtransparency=”true”を指定。
|
0 1 2 3 4 |
body { background-color: transparent; } |
|
0 1 2 |
<iframe src="http://astore.amazon.co.jp/xx" allowtransparency="true" ......></iframe> |
こうすることで見事IEで背景色が消えてくれました。
参考サイト
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓