htmlで画像を重ねて表示

ご存じの人も多いかと思うが、PNGやGIFといったファイルは「透過色」なるものが用意されており、後ろが透過して見えるような色(?)を使うことができる。

故に画像を重ねれば見た目合成したようにすることができるのだが、単純にhtml上にImgで並べるだけでは合成されない。

＜img border=0 src="gazou.png" width=400 height=400 style="position: absolute; top:0; left:0;"＞
＜img border=0 src="sitagasukeru.png" width=400 height=400 style="position: absolute; top:0; left:0;"＞

<>をhtmlタグとして認識されてしまうらしく、全角で表示しているのでコピペする方は注意していただきたい。

のように強制的に位置を決めてやってしまえば良い。
上の例だと上から０，左から０の位置に400x400で表示するという設定。

スタイルシートに書いたけどうまくいかなかったので直接貼り付けたのはここだけの話。