ＧＩＦ画像だけをＣＳＳやＨＴＭＬで設定する事が出来ますか？（画像を２重に重ねたい）

質問

こんにちは。
テーブルがあるとします。最後のところに画像を入れます。この画像に重ねるように画像を載せたいです。この場合、このテーブルの最後に２つ並べるように、また、１つの画像にすることなく、２枚目の画像のみ、位置指定して載せる事が出来ますでしょうか？

ＧＩＦ画像だけをＣＳＳやＨＴＭＬで位置を設定して、載せる事が出来ますか？（画像を２重に重ねたい）レイヤーのようにです。ただレイヤーですと、位置が崩れてしまう心配がありました。
ＣＳＳなどで出来ますでしょうか？

よろしくお願いいたします

回答No.2

345itati · ベストアンサー

補足ありがとうございます。

・・・結論から言えば、HTMLをいじってページ自体に修正を加えなければ、画像の追加は出来ないのですが、「画像を重ねて表示したい」という事であれば、スタイルシートのz-indexプロパティで、階層の順位を決められますので、画像を重ねて表示させる事が出来ます。これと、positionプロパティで位置指定をして、画像を重ねて配置すれば出来ます。
忠告として少しだけ、画像を重ねると言う事は、位置によっては下の画像が全く、あるいはほとんど見えなくなってしまいます(透過gifであれば透けて見える部分もあるが)。画像処理ソフトのように、「レイヤーの表示を任意に切り替える」ような動作はHTMLでは無理です。下の画像が見えなくても構いませんか？

具体的なソースと画像の大きさが分からないので、とりあえずこうすれば出来る、という助言だけですいません^^;
→http://www.tagindex.com/stylesheet/box/z-index.html
→http://www.tagindex.com/stylesheet/box/position.html

お礼

345itati　様
ご丁寧に、詳しく教えてくださりありがとうございました。
ＣＳＳの重ねるフィルー、ございますね。やはり、htmlでは無理みたいですね。htmlかＣＳＳで解決したかったのは、htmlファイル自体のレイアウトをぎちぎちに作ったものですから、あまりいじりたくありませんでした。
画像の件は、少しオーバー気味にお伝えしました。本当のところは、5pxほどの単位です。

大変勉強になりました。
ありがとうございました

回答No.1

345itati

重ねるという意味がちょっと分かりにくいです。オンマウスで画像を切り替えるロールオーバー効果を作りたいのでしょうか？
それとも二枚の画像を重ねるだけ？
>この画像に重ねるように画像を載せたいです。この場合、このテーブルの最後に２つ並べるように、また、１つの画像にすることなく、２枚目の画像のみ、位置指定して載せる事が出来ますでしょうか？
重ねるようにと最初で断っておいて、次には並べるようにと言われているので意味不明です。

どちらもHTMLとCSSで可能だと思いますが(ロールオーバーもCSSで出来ない事は無い)、何をしたいのかがはっきり分かりません。

補足お願い致します。

補足

説明がわかりにくかったですね。すみません。
やりたいことは、ホームページを作りできあがっているとします。あとから、指定の位置（座標）に50x50の画像を載せたいときに、できあがっているホームページに挿入するのではなく、もう一枚レイヤーを作成する感じで、上にかぶせる形で表示したいという事です。
よく画像処理ソフトで作るやり方です。レイヤー１にメイン画像を、追加の画像をレイヤー２などと言うように、、、。

なぜこのようにしたいというと、ホームページが完成していますので、小さな隙間に画像を挿入してしまうと、レイアウトが崩れてしまうのです。ですので、ＣＳＳなどで出来たらなと思ったからです。

わかりますでしょうか？
よろしくお願いいたします