アイフレームと透過の関係についてです。

質問

画像の上にアイフレームコンテンツを載せようとしてます。
そこでアイフレーム内ページのbodyにtransparentを入れた所、
画像を突き抜けて背景が表示されてしまいました。
どのようにしたら画像が保持されたまま置けるのでしょうか？
他に方法はないでしょうか？

回答No.3

torayoshi · ベストアンサー

#1です。
当方（IE8 Firefox4.0.1）で
http://tuku.spawn.jp/collect/html/frame14.htm
にあるソースでやってみましたが「画像まで透過される」現象を再現出来ませんでした。

検証用ブラウザは何を使ってますか？
全ページのソースをここに書いてみてください。

お礼

解決しました。

外部スタイルシートで背景を指定していた為に、
全てのページのbodyがその背景になってしまっていたようでした。
初歩的な所ですみませんでした。

回答No.5

abacabu

度々失礼ｗ
素朴な疑問があります。その”お皿”ってもしかしてiframeの後に設定してません??
先に設定すれば特に透過処理だけでちゃんと私の環境では
imgがちゃんと透過処理され画像が見えました。
後に記述するにつれそのデータの階層は上になります。
まぁそれをあえてＣＳＳのz-indexを使って逆転させる事も可能ですが。
普通に無駄な処理をしたくない場合は
透過させる前提ですと先にimgを指定してそのあとにiframeをしていして、
position: absolute or relative;とtop: *px; left: *px;などで画像の上に
iframeを設置して、iframe内のＨＴＭＬのbodyに
background-color: transparent;をしていすれば
問題なく画像がインラインの背景として透過されます。
恐らく”お皿”imgの設定位置に問題が有る物と思います。
あとz-index: 0;=bodyですので
iframeにz-index: 1;を指定されている様ですが
これも関連が有るかもしれません。
iframe側はz-index: 3;位にしておくとか

お礼

引用したソース元さんはz-indexを利用して通常とは逆の順序（アイフレームの後）で記述していました。大本の原因は外部スタイルシートの背景指定だったのですが、それを修正した後に少し問題が出て、仰るとおりの部分の対処法できちんと透過されたページを作る事が出来ました。ありがとうございました。

回答No.4

abacabu

再度書き込みします。私の知識不足のようで…
透過処理できるのですね。
インラインの映し出されるＨＴＭLに
body {
background-color: transparent;
}
これを指定したら画像を突き抜けてbodyまでいったってことですかね？
ならbodyに
メイン画面の(ページ拝見しましたが白地ですよね？)
背景にあの背景img(キラキラ?)を指定して
background-positionで位置指定してbodyに張り付ければ良いかも？
もしくは
そのお皿imgをz-index:0;にしてみるとか…
0は指定できないんだっけな…
iframeをz-index:3;位にして、img(お皿)をz-index:2 or1;辺りに設定して
iframeよりも下の階層と認識させてみるとか…
余りくわしくないんで申し訳ないのですがこの位しか思いつきません…

回答No.2

abacabu

独学でＷＥＢサイトを作成しているものです。
ちなみに、そのiframeにはどのＨＴＭＬが出力されているのでしょうか？
またそのＨＴＭＬのbackgroundは何でしょうか??

というかiframeを使って一体何をしたいのでしょう？
基本的にインライン要素は別に透過しているわけではないと思いますよ?
当然下の画像のiframeに隠れた部分が映し出されることもないです。
(同じ画像をiframe内に設定して、微調整して透過しているようにするのは可能)

補足

"出力"がわからなかったのでそれっぽい単語を‥
宣言はframesetです。あとはmetaタグでtext/htmlのようなものを入れてます

背景の上に大きな画像を置きそれをお皿とし、その上にアイフレームを設置。
そのまま設置するとお皿が見えないので透過しようとアイフレームページに
background-color: transparent;を入れたところ、
お皿まで透過されてしまい下の背景が見えてしまっている状態です

元の質問を言い換えただけですが・・・すみません
http://tuku.spawn.jp/collect/html/frame14.htm
こちらの通りです

回答No.1

torayoshi

画像は一部でも表示されてるんでしょうか？
それともまったく表示されてないとか。
まったく表示されてないのならiframeの前にimageを。

http://www16.plala.or.jp/zaq_501/test/index.html

補足

ソース拝見しました。綺麗にまとまっていて驚きました
http://tuku.spawn.jp/collect/html/frame14.htm
こちらのサイト様のソースを参考に作っていたのですが
そのままiframeの前にimageを置いた所、ページが後ろに隠れてしまいました
なかなか解決しません‥