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

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

<img src="..." alt="" />
<div style="position:relative;top:-50px;">
   This text will display 50 pixels higher than it original position,
   placing it on top of the image. However, the text will still take up
   room in it 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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

 .main_image{grid-area: overflow;}

    .main_text{
    grid-area:overflow;
    color: white;
    margin: auto auto auto 5%;
    font-size: 2rem;
    line-height: 3rem;} 
    .main{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:1fr; 
    grid-template-areas: "overflow";
    }
    <div class="main">
			
      <div class="main_image">
         <img src="https://images.unsplash.com/photo-1548783300-70b41bc84f56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" style="width:100%; height:auto">
       </div>

       <div class="main_text"> 
            <p>overlap text</p>
            <h2>your text</h2>
            <p>lorem ipsum lorem lorem</p>
       </div>  
   </div>