Sicherheit & Internet:Internet:Web-Entwicklung

Teil 4: CSS Tricks: Bilder mit Pep

28.4.2009 von Redaktion pcmagazin

ca. 1:15 Min
Ratgeber
  1. CSS Tricks: Bilder mit Pep
  2. Teil 2: CSS Tricks: Bilder mit Pep
  3. Teil 3: CSS Tricks: Bilder mit Pep
  4. Teil 4: CSS Tricks: Bilder mit Pep
  5. 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:

-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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.