■ 画像の重ね合わせ（合成）について

一般的に画像を重ねて表示したい場合は、画像ソフトで加工しますよね？
てか、それが普通なんですが、まれに背景はそのままでその上に画像を乗せたい時ってあるじゃないですか。

画像ソフトも使わず、ある画像の上に『ちょこん』と画像を乗せれたらなぁ〜って思うことあります。
それって割りと簡単にできたりします。

それはね、「背景（画像）」をうまく使うんです。
「背景（画像）」ってどんなとこに使用できるのか知ってますか？

「ページの背景だろう？」．．
んふふふ、あってます。

でもね、それだけじゃあないんです。
テーブルやセルにも背景画像って使用できるんですよ？

例えばね、

【記述サンプル】

<table style="width: 100px; height:100px; border:1px solid #cccccc" summary="サンプル"> <tr> <td style="background-image:url('../../images/exp/renga0.gif'); text-align:center;"> <img src="../../images/exp/ico007.gif" alt="車" width="32" height="32"> </td> </tr> </table>

こんな風に。

実はこれ、既に「HTMLの解説」−「7.表(テーブル)の属性」で解説してるんです。
覚えてますか？

その時は背景画像と文字という形でしか説明してませんけどね。

したがって、ページ背景、テーブル背景、セル背景、そして画像、と、うまく使えば、今までの単純な「HTML」で最低４枚の画像を重ねることができるんです。
しかも、セルの中にさらにテーブルを入れるとテーブルが重なり、幾重にも画像を合成することができます。

でも、あまり何枚も重ねても見にくくなるだけですから、数枚が限度でしょうね。 (^^)

※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。