Lớp phủ văn bản trên hình ảnh sử dụng vị trí tương đối

Question

Tôi muốn đặt văn bản phủ một hình ảnh. Dưới đây là mã đang được sử dụng của tôi:

<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> 

Vấn đề của tôi là, mặc dù các văn bản được overlayed đúng cách, các "không gian" nó tiêu thụ trong <td> vẫn còn đó! Khi tôi cố gắng thay thế vị trí 'trên cùng' trong số <div> bằng 'lề trên cùng', nó cũng ảnh hưởng đến <img> và do đó, <img> vượt qua biên giới của <td>.

Xin hãy giúp tôi!

Cảm ơn!

Answer 1

Bạn muốn position: absolute và chứa là 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

Tại sao không thiết lập một div bên trong TD thiết lập các hình ảnh vào nền của div và thả văn bản của bạn trong 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>