Как поместить текст поверх изображения без абсолютного позиционирования или установки изображения в качестве фона - PullRequest
Новая
       22

Как поместить текст поверх изображения без абсолютного позиционирования или установки изображения в качестве фона

13 голосов
/ 02 декабря 2009

Я пытаюсь понять, возможно ли нанести какой-либо текст поверх изображения, не используя position: absolute или имеющее изображение в качестве фона элемента.
Причина ограничений заключается в том, что HTML-код входит в электронное письмо, и оказывается, что hotmail не поддерживает ни того, ни другого.
Я помню, что когда я впервые начал изучать CSS, возиться с плавающим текстом вокруг изображений, я часто заканчивал тем, что текст весело шел по всему изображению. К сожалению, я не могу воспроизвести это поведение.

Полная история (отредактировано):
Я получил модный макет от графического дизайнера. По сути, это хорошая фоновая картинка с логотипами, связанными с веб-сайтами, а в середине находится область «текст идет сюда».
Как обычно в этих случаях, я использую таблицы, чтобы убедиться, что все остается на месте И работает crossbrowser + crossmailclient.
Проблема возникает из-за того, что средняя область «текст идет сюда» не является белым прямоугольником, но имеет некоторую фоновую графику.
После некоторого теста кажется, что Live Hotmail не нравится ни положение: абсолютное или фоновое изображение; относительные поля также не очень хороши, потому что они испортили бы остальную часть макета.

Текущая версия, работает на любом другом почтовом клиенте / сайте: 

...
<td>
<img src='myimage.jpg' width='600' height='400' alt=''>
<p style="position: absolute; top: 120px; width: 500px; padding-left: 30px;">
blablabla<br>
yadda yadda<br>
</p>
</td>
...

Конечно, «это невозможно» может быть вполне приемлемым ответом, но я надеюсь, что нет;)

Ответы [ 5 ]

66 голосов
/ 02 декабря 2009

Раньше я делал такие трюки, как только приходили столы. Действительно ужасно и может серьезно смущать любого валидатора, через которого вы его запускаете: перекрывающихся ячеек таблицы. Работает в большинстве браузеров, хотя и даже без CSS.

Пример: 

<table>  
  <tr>
    <td></td>
    <td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
  </tr>  
  <tr>
    <td colspan=2>This is the overlay text</td>
  </tr>  
</table>

Я знаю, я заслуживаю понижения за это.

6 голосов
/ 02 декабря 2009

Если вы используете абсолютное позиционирование, вы должны указать оба атрибута left и top. Кроме того, вы должны установить position:relative; на некоторый родительский элемент, чтобы сделать его слоем, чтобы абсолютное позиционирование использовало этот элемент в качестве источника. Если вы не укажете источник, это может быть окно или какой-то другой элемент, и вы не знаете, где окажется ваш абсолютно позиционированный элемент.

Есть несколько других вариантов размещения элементов друг над другом, каждый со своими ограничениями.

Вы можете использовать относительное расположение для отображения текста поверх изображения: 

<img src="..." alt="" />
<div style="position:relative;top:-50px;">
   This text will display 50 pixels higher than it's original position,
   placing it on top of the image. However, the text will still take up
   room in it's original position, leaving an empty space below the image.
</div>

Вы можете использовать плавающий элемент внутри другого элемента, чтобы поместить текст поверх изображения: 

<div>
   <div style="float:left;">
      This text will be on top of the image. The parent element
      gets no height, as it only contains floating elements.
      However, IE7 and earlier has a bug that gives the parent
      element a height anyway.
   </div>
</div>
<img src="..." alt="" />
3 голосов
/ 02 декабря 2009

Лучший способ контролировать внешний вид - сделать текст частью самого изображения. Конечно, если вы используете формат изображения с потерями, такой как jpeg с высокой степенью сжатия, это может выглядеть очень плохо, но, возможно, PNG подойдет вам? Или, в зависимости от количества цветов, изображение может работать.

Это также дает вам согласованные шрифты, фильтрацию и т. Д.

1 голос
/ 02 декабря 2009

Вы можете попробовать установить отрицательные поля. Это очень трудно поддерживать во всех, кроме наименее сложных макетов. Эффективное отрицательное поле «тянет» элемент в этом направлении. 

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>
0 голосов
/ 19 декабря 2014

скажем, если у вас есть родительский div и изображение и абзац внутри него, задайте положение "относительный" для всех трех и "z-index" для детей, скажите "20" изображение и "21" для Текст. текст появится над изображением. и вы можете настроить текст с "сверху или слева или справа или снизу" 

CSS
#learning{
margin: 0px;
padding:0px;
height: auto;
width: 100%;
position: relative;

}
#learning>img{
width:inherit;
height:inherit;
margin: 0px;
display: block;
position: relative;
z-index: 20;
}
#learning > p{
font-family: 'droid_serifitalic';
color: white;
font-size: 36px;
position: relative;
top:470px;
left:500px;
z-index: 21;
}
...