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

Question

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

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

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

Я знаю, я заслуживаю за это отрицательного отзыва.

Answer 2

Если вы используете абсолютное позиционирование, вы должны указать как 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="" />

Answer 3

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

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

Answer 4

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

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

Answer 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;
} 

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