Wie Text über ein Bild ohne absolute Positionierung setzen oder das Bild als Hintergrund einstellen

Question

Ich versuche, um zu sehen, ob es möglich ist, ohne Position einen Text über ein Bild zu setzen. Absolute oder wobei das Bild mit, den Hintergrund eines Elements
Der Grund für die Einschränkungen ist, dass der HTML-Code in eine E-Mail wird, und es stellt sich heraus, dass hotmail weder unterstützt.
Ich erinnere mich, als ich die erste CSS begann das Studium, das Hantieren mit Schwimmer-ing Text um Bilder, die ich oft mit dem Text fröhlich geht alle auf das Bild endet. Leider kann ich nicht, dass das Verhalten reproduzieren.

Ganzer Artikel (herausgegeben in):
Ich erhielt ein schickes Layout aus den Grafik-Designern. Es ist im Grunde ein schönes Hintergrundbild, mit Logo Links zu Websites und im Grunde, was ist ein „Text geht hier“ in der Mitte.
Wie üblich in diesen Fällen bin ich mit Tabellen, um sicherzustellen, dass alles an seinem Platz bleibt und arbeitet cross + crossmailclient.
Das Problem ergibt sich aus der Tatsache, dass die Mitte „Text geht hier“ -Bereich ist nicht ein weißes Rechteck, hat aber ein paar Hintergrundgrafiken.
Nachdem einige Test gemacht, scheint es, dass Live Hotmail scheint nicht weder Position zu mögen: absolute oder Hintergrund-Bild; relative Margen sind auch nicht gut, weil sie den Rest des Layouts ruinieren würde.

Die aktuelle Version arbeitet in einer anderen Mail-Client / Website:

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

Natürlich, „es ist nicht möglich,“ könnte eine durchaus akzeptable Antwort sein, aber ich hoffe nicht;)

Answer 1

habe ich Stunts wie dies die ganze Zeit zu ziehen, sobald Tische kam. Wirklich hässlich, und kann in Verlegenheit bringen ernsthaft jeden Validator Sie führen Sie es Trog: überlappende Tabellenzellen. Funktioniert in den meisten Browsern zwar und auch ohne CSS.

Beispiel:

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

Ich weiß, ich verdiene ein downvote dafür.

Answer 2

Wenn Sie die absolute Positionierung verwenden, sollten Sie sowohl die left und top Attribute angeben. Außerdem sollten Sie position:relative; auf einige übergeordnete Element auf sie eine Schicht bilden, so dass die absolute Positionierung dieses Element als Ursprung verwendet. Wenn Sie nicht über die Herkunft angeben, kann es das Fenster sein oder es kann ein anderes Element sein, und Sie nicht wissen, wo Ihr absolut positioniertes Element wird am Ende.

Es gibt einige andere Alternativen Elemente übereinander zu platzieren, jede mit ihren eigenen Grenzen.

Sie können die relative Positionierung verwenden, um Textanzeige auf der Oberseite eines Bildes zu machen:

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

Sie können in einem anderen Elemente ein schwebendes Element verwenden, um Text oben auf ein Bild zu setzen:

<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

Der beste Weg, um das Aussehen der Dinge zu steuern wäre, den Textteil des Bildes selbst zu machen. Natürlich könnte es wirklich schlecht aussehen, wenn Sie ein verlustbehaftetes Bildformat wie JPEG mit hohen Kompression verwenden, aber vielleicht für Sie einen PNG funktioniert? Oder, abhängig von der Anzahl der Farben, könnte ein gif arbeiten.

Dies gibt Ihnen auch konsistent aussehende Schriftarten, Filterung, etc.

Answer 4

Sie können negative Margen versuchen zu setzen. Das ist sehr schwierig, alle, aber die am wenigsten komplexen Layouts zu halten in. Eine negative Marge wirksam "zieht", um das Element in dieser Richtung.

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

Answer 5

sagen, wenn Sie einen Elternteil div und ein Bild und Absatz im Innern haben, geben Position „relativ“ zu allen drei von ihnen, und geben „z-index“ für Kinder, sagt: „20“ Bild und und „21“ auf Text. wird der Text über das Bild erscheinen. und Sie können den Text mit „oben oder nach links oder rechts oder unten“

einstellen

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>