Text mit CSS definieren

[serializable]

Hallo ,

ich habe mal eine Frage zum Definieren eines Textes auf einem Bild mit Hilfe von CSS.

Es gibt eine id Bild, in welcher ein Bild ausgegeben wird. Auf diesem Bild möchte ich nun einen Text ausgeben.

#bild{......}

Dann habe ich es so versucht: bild:after{ content: "Bild schließen" }
Das haut allerdings nicht hin. Kann hier jemaand unterstützen ?


Viele Grüße

 

[Maik]

Hi,

der einfachste Weg wäre hier das Bild als Hintergrundbild eines Elements zu definieren, und darin den Text zu notieren

Aber gut, für den Fall, dass das Bild als img-Element im Markup vorliegt, wäre dies eine mögliche Technik, um den auf das Bild nachfolgenden Text "nach oben zu verschieben":

<span class="wrapperBox">
      <img src="pfad/zur/grafik" alt=""><span>Text über Bild</span>
</span>

span.wrapperBox img {
display:block;
}
span.wrapperBox span {
position:absolute;
margin-top:-50px; /* Element mit Text wird um 50px nach oben verschoben */
}

Vom erwähnten Pseudoelement :after in Verbindung mit der content-Eigenschaft für automatisch generierten Inhalt ist hier eher abzuraten, da beides von der aktuellen Version des IE7 noch immer nicht unterstützt wird, und auch die content-Eigenschaft nicht in allen standardkonformen Browsern gleichermaßen ohne Einschränkungen funktioniert.

mfg Maik