Tekst nakładki na obraz przy użyciu pozycjonowanie względne

Question

chcę umieścić tekst przykrywający obraz. Poniżej jest moje obecnie stosowany kod:

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

Moim problemem jest to, mimo że tekst został prawidłowo nałożony, „przestrzeń” zużywa w <td> nadal istnieje! Kiedy próbowałem zastąpić pozycji „top” w <div> z „margin-top”, to również wpływa na <img> a więc <img> mija granicy <td>.

Proszę mi pomóc!

Dzięki!

Answer 1

Chcesz position: absolute i pojemnikbyć 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

Dlaczego nie ustawić div wewnątrz TD ustawić obraz w tle div i upuścić tekst w 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>