写真や画像と文字を重ねて表示する方法

写真上や画像上に文字を入れたい時ってありますよね・・・

今日はそんな技を紹介してみますね・・・

1. 写真はこれを使用してみましょう
   
   
   
2. 先ず作業スペースに写真を入れます
   作業スペースの高さは写真より少し高く設定しました。
   
   <DIV style="height:200px">
     <img src="画像.jpg">
   </DIV>
   
   
3. 次に、文字を入れる作業スペースを設定します
   
   <DIV style="height:200px">
   <img src="画像.jpg"><br>
   <DIV>
   <SPAN style="background:white;color:darkgreen">
   東郷二十世紀梨
   </SPAN>
   </DIV>
   </DIV>
   
   
4. しかし、これだけでは、写真と文字は下の様な感じにしかなりません
   
   

   東郷二十世紀梨
   
   
   
5. 写真と文字を重ねるには・・・positionプロパティを使用します
   
   
6. 外側の作業スペース枠に・・・style="position:relative"
   relative・・・本来表示される位置から、相対的に指定ピクセルだけ移動した位置に表示。
   
   
7. 内側の作業スペース枠に・・・style="position:absolute"
   absolute・・・positionプロパティで値が指定されてる最も近い位置にある枠の端から、指定ピクセルだけ離れた位置に表示
   
   
8. だから、内側の枠の移動目標として外側の枠にstyle="position:relative"を入れておく訳です
   
   
9. 文字を表示する位置と幅を決めて、まとめて記述しますと・・・
   ※　topとleftは外枠の端からの距離の事です。
   <DIV style="height:200px;position:relative>
   <img src="画像.jpg"><br>
   <DIV style="position:absolute;top:170px;left:35px;width:180px">
   <SPAN style="background:white;color:darkgreen">
   東郷二十世紀梨
   </SPAN>
   </DIV>
   </DIV>
   
   
   
10. すると、下のように写真と文字が重なって表示されます。
    
    
    

    東郷二十世紀梨

今日の小技は如何でしたか？