it-swarm.com.de

So legen Sie Text über ein Bild ohne absolute Positionierung oder Einstellung des Hintergrunds

Ich versuche zu sehen, ob es möglich ist, Text über ein Bild zu setzen, ohne Position zu verwenden: absolut oder wenn das Bild der Hintergrund eines Elements ist.
Der Grund für die Einschränkungen ist, dass der HTML-Code in eine E-Mail übertragen wird und Hotmail keine der beiden unterstützt.
Ich erinnere mich, dass ich, als ich anfing, CSS zu lernen, mit herumfließendem Text um Bilder herumfummelte, der Text oft fröhlich durch das Bild ging. Leider kann ich dieses Verhalten nicht reproduzieren.

Vollständiger Artikel (bearbeitet in):
Ich habe vom Grafikdesigner ein ausgefallenes Layout erhalten. Es ist im Grunde ein schönes Hintergrundbild, mit Logos, die auf Websites verweisen, und im Wesentlichen ist ein Bereich "Text geht hier" in der Mitte.
Wie üblich verwende ich in diesen Fällen Tabellen, um sicherzustellen, dass alles an Ort und Stelle bleibt UND Crossbrowser + Crossmailclient funktioniert.
Das Problem ergibt sich aus der Tatsache, dass der mittlere Bereich "Text geht hier" kein weißes Rechteck ist, sondern einige Hintergrundgrafiken.
Nach einigen Tests scheint Live Hotmail keine Position zu mögen: absolut oder Hintergrundbild; relative Margen sind auch nicht gut, weil sie den Rest des Layouts ruinieren würden.

Aktuelle Version, funktioniert in jedem 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 kann "es nicht möglich" eine durchaus akzeptable Antwort sein, aber ich hoffe nicht;)

13
Agos

Ich zog immer wieder solche Stunts an, sobald Tische kamen. Wirklich hässlich und kann jeden Validator ernsthaft in Verlegenheit bringen: Überlappende Tabellenzellen. Funktioniert in den meisten Browsern und sogar 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 dafür einen Downvote.

66
Zano

Wenn Sie die absolute Positionierung verwenden, sollten Sie die Attribute left und top angeben. Sie sollten auch position:relative; für ein übergeordnetes Element festlegen, um es zu einer Ebene zu machen, sodass die absolute Positionierung dieses Element als Ursprung verwendet. Wenn Sie den Ursprung nicht angeben, kann es sich um das Fenster oder um ein anderes Element handeln, und Sie wissen nicht, wo Ihr absolut positioniertes Element endet.

Es gibt andere Alternativen, um Elemente übereinander zu platzieren, die jeweils ihre eigenen Einschränkungen haben.

Sie können die relative Positionierung verwenden, um Text auf einem Bild anzuzeigen:

<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 ein schwebendes Element in einem anderen Element verwenden, um Text 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="" />
6
Guffa

Der beste Weg, um das Aussehen der Dinge zu steuern, besteht darin, den Text in das Bild selbst zu integrieren. Wenn Sie ein verlustbehaftetes Bildformat wie jpeg mit hoher Komprimierung verwenden, könnte es natürlich sehr schlecht aussehen, aber vielleicht funktioniert eine PNG-Datei für Sie? Abhängig von der Anzahl der Farben kann ein GIF funktionieren.

Dadurch erhalten Sie auch einheitlich aussehende Schriftarten, Filter usw.

3
Andy West

Sie können versuchen, negative Ränder einzustellen. Dies ist in allen außer den am wenigsten komplexen Layouts sehr schwierig zu warten. Ein negativer Rand "zieht" das Element effektiv in diese Richtung.

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

sagen Sie, wenn Sie ein übergeordnetes div und ein Bild und einen Absatz darin haben, geben Sie allen drei eine Position "relativ" und geben Sie den Kindern "z-index", sagen Sie "20" und "21" für Text. Der Text erscheint über dem Bild. und Sie können den Text mit "oben oder links oder rechts oder unten" anpassen

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