Teil 5: CSS Tricks: Bilder mit Pep
- CSS Tricks: Bilder mit Pep
- Teil 2: CSS Tricks: Bilder mit Pep
- Teil 3: CSS Tricks: Bilder mit Pep
- Teil 4: CSS Tricks: Bilder mit Pep
- Teil 5: CSS Tricks: Bilder mit Pep
Bild und Beschriftung stehen innerhalb eines umfassenden Elements, die Bildbeschriftung selbst in einem span-Element:...
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.
