Suche Menü

HTML/CSS Bild mit Textbeschriftung überlagern

Mit HTML und CSS3 eine Textbeschriftung auf einem Bild mit transparentem Hintergrund erstellen.

Eine Bildbeschriftung mit HTML und CSS Technik ist recht einfach, man braucht die „position: relativ“
und „position: absolute“.
drop cap mit css stylen
Demo anschauen
Beginnend mit dem HTML-Code haben wir einen DIV mit der Klasse „.bild_beschriftung“ innerhalb dieses DIV befindet sich das Bild und der Text, welcher in ein span Element gesetzt wird.

<div class="bild_beschriftung">
<img alt="color_key" src="bild_mit_text.jpg" width="400" height="267" />
<span>Color Key</span></div>

Schauen wir, wie nun das ganze mit CSS umgesetzt wird.
Das umfassende Element „.bild_beschriftung“ welches das Bild enthält, erhält die „position:relativ“.
Das Bild „.bild_beschriftung img“ wird zum Blockelement „display: block“.

.bild_beschriftung {
  position: relative;
}
.bild_beschriftung img {
  display: block;
}

Die Beschriftung soll ja in Relation zum umfassenden Element stehen welches das Bild enthält, dies bewirken wir mit der „position: absolute“ mit den werten top, bottom, left oder right. Desweiteren haben wir eine Breite width: 400px welche auf die Breite des Bildes bezogen ist.

.bild_beschriftung span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 400px;
  color: #fff;
  text-align: center;
  height: 2.5em;
  line-height: 2.5em;
  border-top: 1px solid #ababab;
  background: #404040; /* Fallback IE 6-8 */
  background-color: rgba(40, 40, 40, 0.6);
}

Die Zeilenhöhe „line-height:“ und die Höhe „height:“ des transparenten Balken sollten gleich hoch sein, somit ist der Text schön mittig ausgerichtet.
Soweit die Grundlegende Formatierung.

Gestaltung der CSS3 Farbtransparenz
Anstelle des normalen RGB-Farbwerts (rgb = rot, grün, blau) nutzen wir den CSS3 RGBA-Wert. A steht hierbei für Alpha und gibt den Transparenz-Wert der RGB-Farbe an mögliche Werte 0-1 „background-color: rgba(40, 40, 40, 0.6)“. Als Fallback- Lösung für ältere Browser empfiehlt es sich zusätzlich eine Standard rgb Hintergrundfarbe anzugeben.
Der Vollständige CSS-Code

.bild_beschriftung {
  position: relative;
}
.bild_beschriftung img {
  display: block;
}
.bild_beschriftung span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 400px;
  color: #fff;
  text-align: center;
  height: 2.5em;
  line-height: 2.5em;
  border-top: 1px solid #ababab;
  background: #404040; /* Fallback IE 6-8 */
  background-color: rgba(40, 40, 40, 0.6);
}

Das war es !! ich hoffe der Artikel gefällt