Cómo poner el texto sobre una imagen sin posicionamiento absoluto o la creación de la imagen como backbround

Question

Estoy tratando de ver si es posible poner un texto sobre una imagen sin usar. Posición: absoluta o tener el ser imagen, el fondo de un elemento
La razón de las limitaciones es que el código HTML está entrando en un correo electrónico, y resulta que no admite ni hotmail.
Recuerdo que cuando empecé a estudiar CSS, perder el tiempo con texto flotante-ing alrededor de las imágenes que a menudo terminaban con el texto alegremente que van alrededor de la imagen. Lamentablemente, no puedo reproducir ese comportamiento.

Historia completa (editado en):
Recibí un diseño de lujo del diseñador gráfico. Se trata básicamente de una buena imagen de fondo, con los logotipos de enlaces a sitios web y lo que básicamente es un "texto va aquí" área en el centro.
Como es habitual en estos casos, estoy usando tablas para asegurarse de que todo se queda en su lugar y funciona crossbrowser + crossmailclient.
El problema surge del hecho de que el medio "texto va aquí" zona no es un rectángulo blanco, pero tiene algunos gráficos de fondo.
Después de haber realizado algunas pruebas, parece que Live Hotmail no parece que les gusta ninguna de estas posiciones: absoluta o imagen de fondo; márgenes relativos tampoco son buenos porque arruinaría el resto del diseño.

La versión actual, funciona en cualquier otro cliente de correo / sitio web:

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

Por supuesto, “no es posible” podría ser una respuesta perfectamente aceptable, pero espero que no;)

Answer 1

Yo solía tirar de trucos como esto todo el tiempo, tan pronto como llegaron tablas. Muy feo, y puede avergonzar seriamente cualquier validador se ejecuta Trough: la superposición de celdas de la tabla. Funciona en la mayoría de los navegadores y aunque aún sin CSS.

Ejemplo:

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

Lo sé, lo merezco una downvote para esto.

Answer 2

Si utiliza la colocación absoluta, debe especificar tanto el left y atributos top. También, se debe configurar position:relative; en algún elemento de los padres para que sea una capa, por lo que el posicionamiento absoluto utiliza ese elemento como origen. Si no se especifica el origen, puede ser la ventana o puede ser algún otro elemento, y no se sabe dónde está su elemento con posición absoluta va a terminar.

Hay algunas otras alternativas para colocar los elementos en la parte superior de uno al otro, cada uno con sus propias limitaciones.

Puede utilizar el posicionamiento relativo para hacer visualización de texto en la parte superior de una imagen:

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

Puede utilizar un elemento flotante dentro de otro elemento para poner el texto en la parte superior de una imagen:

<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

La mejor manera de controlar el aspecto de las cosas sería hacer la parte del texto de la propia imagen. Por supuesto, si se utiliza un formato de imagen JPEG con pérdida como con alta compresión podría parecer muy mal, pero tal vez un PNG funcionará para usted? O, dependiendo del número de colores, un gif podría funcionar.

Esto también le da fuentes de aspecto consistentes, filtrado, etc.

Answer 4

Puede intentar establecer márgenes negativos. Esto es muy difícil de mantener en todo menos en los diseños menos complejos. Un margen negativo eficaz "tira" del elemento en esa dirección.

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

Answer 5

decir si tiene un div padre y una imagen y el párrafo dentro de él, darle la posición "relativa" a los tres de ellos, y dar "z-index" a los niños, dicen imagen "20" y y "21" a Texto. el texto aparecerá sobre la imagen. y se puede ajustar con el texto "parte superior o izquierda o derecha o inferior"

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>