Am einfachsten kann man transparente Effekte mit der Trickkiste des Grafikprogramms als so genannte Pseudotransparenzen erstellen. Und in den meisten Fällen ist das auch ausreichend. Wenn jedoch Texte auf transparentem Hintergrund ständig wechseln oder man ganze Hintergrundbereiche transparent erstellen will, muss man sich anderer Methoden bedienen:
Drei Möglichkeiten habe ich hier zusammengetragen:
- Transparenz mit einem transparentem PNG
- Transparenz mit der CSS3 Eigenschaft „opacity“
- Transparenz mit rgba
Transparenz mit einem transparentem PNG
PNG ist ein Bildformat, in welchem Alpha-Transparenzen (Verlaufstransparenzen) gespeichert werden können. Fügt man ein solches Bild als Hintergrundgrafik ein, erscheint der Hintergrund transparent ohne dass man dafür CSS benutzen müsste.
Der Nachteil dieser Methode ist allerdings, dass nur der Internet-Explorer 7 und 8 diese Transparenz anzeigen kann. Kann auf eine adäquate Darstellung im IE6 nicht verzichtet werden, muss ein workaround via conditionel comments eingefügt werden.
#wrapper {
background-image: none;/*png entfernen*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale');
zoom:1;}
Beispiele
Beispiel mit einem transparentem PNG
Variation mit 2 transparenten Bildern übereinandergelegt
Transparenz mit CSS3 opacity
IN CSS3 kann mit der Eigenschaft „opacity“ die Transparenz eines Objekte bestimmt werden. Dazu weist man dem Element die Eigenschaft „opacity“ zu und einen Wert zwischen 0 und 1.
.transparent {opacity: 0.5;}
Da jedoch auch hier der InternetExplorer in der Umsetzung von CSS3 noch nicht so weit ist, muss via conditionel comments ein workaround eingefügt werden.
.transparent {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity:0.5;
zoom:1;}
Der Nachteil dieser Methode ist jedoch, dass die Eigenschaft „opacity“ auf die Kindelemente vererbt wird. Im Ergebnis wir dadurch Text, der sich in dem Element befindet, ebenfalls transparent. Umgehen kann man dieses Problem mit einer Änderung im Markup. Hier ist ein text, der nicht transparent werden soll.
Positionierung via css :
#wrapper {
min-height: 100%;
width: 960px;
margin: 0 auto 0 auto;
padding: 30px 0 30px 0;
position: relative;
}
.transparent {
background: transparent url(images/background.png) repeat-y;
opacity: 0.5;
position: absolute;
top:0;
width: 100%;
height: 100%;
}
.opak {
position: relative;
color: #000;
margin: 20px;
}
Der umgebende container „wrapper“ wird relativ positioniert. Dadurch ist es möglich das Element „transparent“ absolut zu positionieren und den transparenten Hintergrund vom Inhalt zu trennen. Das div „opak“ ist damit kein Kindelement von „transparent“, die Transparenz bleibt so auf das div „transparent“ begrenzt und greift nicht auf die Textinhalte von „opak“ über. Der Text bleibt frei von Transparenz.
Derzeit wird ja gemunkelt, dass der IE9 mit vollständiger Umsetzung von CSS3 in Arbeit ist, alle Versionen darunter können jedoch noch nicht damit umgehen. Deswegen muss auch hier ein workaround mit den propietären IE-Filtern und conditionel comments installiert werden:
.transparent {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity:0.5;
}
.opak {
zoom:1;/*has layout Bug*/
left: 20px;
}
Wer jetzt auch noch den IE6 zur gewünschten Darstellung überreden möchte, muss die Größenangaben des Containers in Pixel statt in Prozent angeben und die ConditionelComments erweitern. Die jeweiligen Werte sind so zu wählen, dass die Abmessungen in jedem Fall ausreichen. Durch die Eigenschaft overflow:hidden wird der Anzeigebereich auf die gewünschte Größe begrenzt.
#wrapper {
overflow: hidden;
}
.transparent {
width: 1000px;
height: 10000px;
}
Beispiel
Transparenz mit rgba
Nicht ganz so neu, aber dennoch nicht so geläufig ist, dass man im CSS-Stylesheet die Farbangaben statt hexadezimal auch mit RGB angeben kann.
Für ein div „wrapper“, dessen Hinergrundfarbe transparent erscheinen soll, notiert man in der .css Datei:
#wrapper {
...
background-color: rgba(102,204,255,0.5);
}
Aber auch hier muss der Internet-Explorer eine Sonderbehandlung via conditionel-comments erfahren, sieht dann so aus:
#wrapper {
background-color: rgb(102,204,255);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity:0.5;
}
Beispiel
Hier noch einige weiterführende Links:
Peter Kröner: Schoenes-neues-css-rgba-und-hsla zu lesen.
24way.org: working-with-rgba-colour
Dirk Jesse: Transparente Hintergruende mit css/
Eric Eggert : Cross Browser rgba
Einsatz
Alle drei Lösungen sind verwendbar. Wenn es um dekorative Gestaltung geht, hat man den größten Spielraum, wenn man mit transparenten PNG arbeitet. Allerdings muss man in Kauf nehmen, dass Bilder, die ganze Hintergrundflächen ausfüllen u.U. zu Lasten der Ladezeit einer Seite gehen können. Wenn man also nicht unbedingt Muster braucht, würden sich CSS3 opacity oder RGBa anbieten. Solange aber die alten IE noch im Einsatz sind, müsste bei der Lösung mit opacity ein div aus rein dekorativen Gründen eingefügt werden. Arbeitet man mit einem Framework, kann man davon ausgehen, dass dann das Template modifiziert werden muss. Ja, nein, ja, nein – ich habe sicherlich schon einige Webseiten gemacht, bei denen ich deko-divs eingefügt habe – man sollte aber abwägen, ob die Gestaltung es wert ist. Tendenziell würde ich deswegen die rgba Lösung vorziehen.