it-swarm.com.ru

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

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

Полная история (отредактировано в):
Я получил модный макет от графического дизайнера. Это в основном фоновая картинка Nice, с логотипами, связывающими сайты, а в середине находится область «текст идет сюда».
Как обычно в этих случаях, я использую таблицы, чтобы убедиться, что все остается на месте И работает 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>
...

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

13
Agos

Подобные трюки я выполнял все время, как только приходили столы. Действительно ужасно и может серьезно смущать любого валидатора, через которого вы его запускаете: перекрывающихся ячеек таблицы. Работает в большинстве браузеров, хотя и даже без 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>

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

66
Zano

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

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

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

<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="" />
6
Guffa

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

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

3
Andy West

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

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>
1
G-Wiz

скажем, если у вас есть родительский 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;
} 
0
River CR Phoenix