Come per mettere il testo sopra un immagine senza posizionamento assoluto o impostando l'immagine come backbround

Question

Sto cercando di vedere se è possibile mettere un po 'di testo su un'immagine senza utilizzare posizione:. Assoluta o avere l'essere immagine, lo sfondo di un elemento
La ragione di vincoli è che il codice HTML è andare in una e-mail, e si scopre che Hotmail non supporta né.
Mi ricordo che quando ho iniziato a studiare i CSS, trafficando con testo float-zione attorno alle immagini spesso finito con il testo allegramente andando tutto sull'immagine. Purtroppo, non riesco a riprodurre quel comportamento.

storia completa (a cura di):
Ho ricevuto un layout di fantasia del designer grafico. E 'fondamentalmente una bella immagine di sfondo, con loghi che collega a siti web e quello che in fondo è un "testo va qui" zona nel mezzo.
Come al solito in questi casi, sto usando le tabelle per assicurarsi che tutto rimanga al suo posto e lavora crossbrowser + crossmailclient.
Il problema deriva dal fatto che il mezzo "il testo va qui" zona non è un rettangolo bianco, ma ha alcune immagini di sfondo.
Dopo aver fatto un po 'di test, sembra che Live Hotmail non sembra piacere né position: absolute o background-image; relativi margini sono anche non va bene perché avevano rovinano il resto del layout.

La versione corrente, funziona in qualsiasi altro client di posta elettronica / sito 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>
...

Naturalmente, “non è possibile” potrebbe essere una risposta perfettamente accettabile, ma spero di no;)

Answer 1

ho usato per tirare acrobazie come questo tutto il tempo, non appena le tabelle sono venuti. Veramente brutto, e può seriamente in imbarazzo qualsiasi validatore si esegue trogolo: sovrapponendo le celle della tabella. Funziona nella maggior parte dei browser e anche se, anche senza css.

Esempio:

<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 so, mi merito un downvote per questo.

Answer 2

Se si utilizza il posizionamento assoluto, è necessario specificare sia il left e gli attributi top. Inoltre, è necessario impostare position:relative; su qualche elemento principale per renderlo un livello, in modo che il posizionamento assoluto utilizza tale elemento come origine. Se non si specifica l'origine, può essere la finestra o può essere qualche altro elemento, e non si sa dove il vostro elemento posizionato in modo assoluto andrà a finire.

Ci sono alcune altre alternative per posizionare gli elementi su uno sopra l'altro, ognuno con i propri limiti.

È possibile utilizzare il posizionamento relativo per rendere la visualizzazione del testo sulla parte superiore di un'immagine:

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

È possibile utilizzare un elemento flottante all'interno di un altro elemento per mettere il testo sulla parte superiore di un'immagine:

<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

Il modo migliore per controllare l'aspetto delle cose sarebbe quello di fare la parte di testo dell'immagine stessa. Naturalmente, se si utilizza un formato di immagine con perdita come jpeg ad alta compressione potrebbe sembrare davvero male, ma forse un PNG lavorerà per voi? Oppure, a seconda del numero di colori, un GIF potrebbe funzionare.

Questo ti dà anche i caratteri coerenti dall'aspetto, filtri, ecc.

Answer 4

Si può provare a impostare margini negativi. Questo è molto difficile da mantenere in tutti, ma i layout meno complessi. Un margine negativo efficace "tira" l'elemento in quella direzione.

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

Answer 5

dire se si dispone di un div genitore e un'immagine e punto al suo interno, dare in posizione "rispetto" per tutti e tre, e dare "z-index" per i bambini, dire immagine "20" e e "21" per Testo. il testo apparirà sopra l'immagine. e si può regolare il testo con "parte superiore o sinistra oa destra o in basso"

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>