Teil 4: 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
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:...
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.
