Göreceli konum belirleme kullanarak görüntünün üzerine metin bindirme

Question

Bir resmin üzerine bir metin yerleştirmek istiyorum.

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

Benim sorundur, metin düzgün yerleştirilmiş olarak da, "boşluk" o <td> hala orada tüketir: Aşağıda benim şu anda kullanılan koddur! 'kenar boşluğu' ile 'üst' konumunu değiştirmeye çalıştığımda, <img> etkilenir ve <img><td> sınırını geçer.

Lütfen yardım edin!

Teşekkürler!

Answer 1

Sen position: absolute istiyor ve konteynerrelative olmak:

<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

Neden div arka planına görüntüsünü ayarlamak TD içinde bir div ve damla div metin ayarlanmamış?

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