Sicherheit & Internet:Internet:Web-Entwicklung

Teil 5: CSS Tricks: Bilder mit Pep

Bild und Beschriftung stehen innerhalb eines umfassenden Elements, die Bildbeschriftung selbst in einem span-Element:

<div class="beschriftung"><img src="blumen.jpg" alt=
"Blumen" /><span>rote Blumen</span></div>

Der Container muss dieselbe Größe wie das Bild haben. Rasch realisieren lässt sich das wiederum durch Floaten des Containers. Damit er als Bezugspunkt für die Positionierung der Bildbeschriftung dient, erhält er außerdem position: relative.

.beschriftung {
position: relative;
float: left;
}

Das Bild selbst muss zum Blockelement werden:

.beschriftung img {
display: block;
}

Nun zu den Formatierungen der Bildbeschriftung. Diese wird absolut positioniert - Bezugspunkt ist die umgebende Box, bei der ja position: relative definiert ist und die so groß ist wie das Bild. Die Beschriftung wird 0px von unten und von links positioniert. Da absolut positionierte Elemente nur so groß werden, wie sie wirklich Platz benötigen, brauchen sie außerdem eine explizite Breite.

.beschriftung span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

Damit ist die Bildunterschrift an Ort und Stelle, es fehlt aber noch das optische Feintuning. Der Bildbeschriftung wird eine Hintergrundfarbe und die Transparenz zugewiesen.

Zusätzlich ist im Beispiel eine Rahmenlinie oben und unten zur Begrenzung der Bildbeschriftung eingefügt. Außerdem wird eine explizite Höhe festgelegt und die Bildunterschrift in diesem Bereich über line-height vertikal zentriert:

.beschriftung span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #222;
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=60);
opacity: 0.6;
color: #fff;
text-align: center;
height: 2em;
line-height: 2em;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}

Das Beispiel lässt sich problemlos variieren. Sie können Farben und Transparenzen nach Belieben anpassen oder die Beschriftung auch etwas weiter nach oben setzen.

Am Beispiel der Transparenz zeigt sich deutlich, wie sich auch fortgeschrittene CSS3-Eigenschaften heute schon einsetzen lassen - wenn auch mit einigem Aufwand für die Extrawürste des Microsoft Internet Explorers.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".