相対的な位置付けを使用して画像上にテキストオーバーレイを作成する

Question

イメージをオーバーレイするテキストを配置したい。以下は私の現在使用されているコードです：

<td width="10%"> 
    <img src="tempballoon.png" alt="balloon" style="z-index: -1"/> 
    <div style="position:relative;left:30px;top:-75px;font-size: 32px;display: none"> 
     Test 
    </div> 
</td> 

私の問題は、テキストが適切にオーバーレイしているが、それは<td>に消費「スペース」はまだそこにある、あります！ <div>の 'top'の位置を 'margin-top'に置き換えようとすると、<img>にも影響し、<img>は<td>の境界を通過します。

私を助けてください！

ありがとうございます！

Answer 1

あなたがposition: absoluteたいとコンテナはrelativeする：

<td width="10%" style="position: relative;"> 
    <img src="tempballoon.png" alt="balloon" style="z-index: -1"/> 
    <div style="position:absolute;left:0px;top:0px;font-size: 32px;display: none"> 
     Test 
    </div> 
</td> 

Answer 2

はなぜdiv要素の背景に画像を設定するTD内側のdiv＆ドロップdivの中にテキストを設定していませんか？

<td width="10%"> 
<div style="background: transparent url("tempballoon.png") no-repeat left top; font-size: 32px;width: 100%; height: height:[height of image]"> 
    Test 
</div> 
</td>