Наложение текста на изображение с использованием относительного позиционирования - PullRequest
Новая
       7

Наложение текста на изображение с использованием относительного позиционирования

11 голосов
/ 17 сентября 2011

Я хочу расположить текст поверх изображения.Ниже мой используемый сейчас код: 

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

* 1010.* Пожалуйста, помогите мне!

Спасибо!

Ответы [ 2 ]

29 голосов
/ 17 сентября 2011

Вы хотите, чтобы 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>
2 голосов
/ 17 сентября 2011

Почему бы не установить 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>
...