상대 위치 지정을 사용하여 이미지 위에 텍스트 오버레이

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>의 '상단'위치를 '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

왜 사업부의 배경 이미지를 설정 TD 내부 사업부 드롭 사업부의 텍스트를 설정하지?

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