vor bilder schreiben

M

mihawk

Mitglied
Abend!
ich hoffe, ich bin hier im richtigen bereich des forums, meine frage:
ich habe ein hintergrundbild und will nun davor ein bild stellen. das ist ja noch einfach für einen wie mich. aber jetzt möchte ich gerne in den Bereich, wo das Bild ist schreiben, also vor das Bild, was für einen befehl/eine Funktion brauche ich dafür?

vielen Dank
 
Hi,

z-index ist die Eigenschaft, die Du brauchst. Damit lassen sich Elemente übereinander
stapeln. Somit kannst Du die Möglichkeit schaffen, auf dem Bild zu schreiben.
Code: 
<div style="position: relative; border: 1px solid black; width: 120px; height: 120px;">
    <img src="bild.gif" width="120" height="120" style="display: block; z-index: 1;">
    <div style="position: absolute; z-index: 2; top: 0px; left: 0px;">Hallo Welt</div>
</div>
Der äussere DIV-Container dient dazu, die inneren Elemente relativ positionieren
zu können. Seine Grösse wird durch die Abmessungen des Bildes bestimmt. Als
erstes inneres Element folgt das Bild und anschliessend der Layer, auf dem der
Text erscheint. Dieser wird absolute in die linke obere Ecke des einschliessenden
DIVs positioniert. Weiterhin bekommt er einen z-Index zugewiesen (z-index: 2),
dessen Wert höher ist als der des Bildes (z-index: 1).

Ciao
Quaese
 
Hallo,

oder du machst einfach einen zusätzlichen Div-Layer, in dem das kleinere Bild als
Hintergrundbild definiert, dann kannst du einfach Text in den Layer schreiben:
Code: 
<!-- Der Tag mit dem großen Hintergrundbild -->
  <div style="background-image:url(kleinesbild.png);width:150px;height:150px;">
    Text auf dem Bild
    <br />
    Foo bar
  </div>
Logischerweise musst du dem Div-Layer eine Höhe geben, weil das Bild ja als Hintergrund drin ist und somit gekürzt werden würde.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück