Sicherheit & Internet:Internet:Web-Entwicklung

Teil 4: CSS Tricks: Bilder mit Pep

Da dies eine proprietäre Syntax ist und laut CSS-Spezifikation proprietäre Eigenschaften durch ein spezielles Präfix gekennzeichnet werden sollen, empfiehlt Microsoft ab Internet Explorer 8 folgende Schreibweise:

-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(Opacity=50)";

Für eine browserübergreifend funktionierende Transparenz müssen also die folgenden Angaben geschrieben werden:

.transparent {
-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}

Bei den proprietären Filtern meldet allerdings der CSS-Validator Fehler. Bei Bedarf können Sie die Angaben für den Internet Explorer in ein eigenes Stylesheet auslagern, das über Conditional Comments eingebunden wird.

Transparenzen einsetzen

Einsatzmöglichkeiten für Transparenzen gibt es viele - beispielsweise kann man ein Bild erst beim Hovern transparent machen. Hierfür wird das Bild innerhalb eines Links platziert:

<a href="#"><img src="blumen.jpg"
alt="Blumen" /></a>

Per CSS wird der Rahmen um das Bild entfernt, der sonst bei verlinkten Bildern standardmäßig zu sehen ist:

a img { border: none; }

Beim Hovern soll das Bild transparent werden. Hierfür notieren Sie den Selektor a:hover img, mit dem Sie Bilder innerhalb eines gehoverten Links ansprechen:

a:hover img {
-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}

a:hover img ist ein ganz gängiger Selektor, kann jedoch im Internet Explorer 6 problematisch sein. Unter Umständen führt der IE 6 die angesprochene Formatierung einfach nicht aus. Dann hilft es, eine beliebige Formatierung allgemein für a:hover festzulegen - auch wenn es eine ist, die eigentlich gar nichts bewirkt wie beispielsweise:

a:hover {
background-position: 0 0;
}

Transparente Bildbeschriftung

Eine schöne Möglichkeit eine Bildbeschriftung einzufügen, setzt ebenfalls auf Transparenzen. Dieses Mal wird allerdings nicht das Bild selbst transparent gesetzt, sondern die Bildunterschrift in einem halbtransparenten Kasten direkt auf dem Bild platziert.

Bilder mit Pep

© Archiv

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​".