CSS3 und die “Durchsichtigkeit”: Opacity vs. RGBA

Welcher Webdesigner wünscht sich das nicht: Grafiken und farbige Ebenen übereinander zu lagern und die untere durch die obere durchscheinen zu lassen und dies schnell, unkompliziert ohne Hilfe von Photoshop-Trickkiste und ressourcensparend durchzuführen. Dies alles ist mit CSS3 möglich. Schauen wir uns die Möglichkeiten, die uns die Eigenschaft opacity und RGBA ermöglichen.

Hinweis: die folgenden Beispiele funktionieren nur in modernen Browsern: Firefox und andere aktuelle Mozilla-Geschwister, Safari, Google Chrome und Opera.

Bei RGBA handelt es sich um den RGB-Farbraum (Rot Grün Blau) mit einer zusätzlichen Information (Alpha, Wert der Durchsichtigkeit). Um das ganze etwas verständlicher zu beschreiben, werde ich hier direkt, ohne größere Theorie, ein paar Beispiele liefern. Zuerst ein Beispiel ohne jegliche Transparenz:

Keine Transparenz!

Hier der entsprechende CSS-Code:

div {
    background: url(test-verlauf.png);
    margin: 15px 0;
    padding: 9px 25px;
}

p {
    background: #008080;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    padding: 25px;
}

Die Sache ist so weit klar: Das komplette Konstrukt ist von einer div-Box mit einer Hintergrundgrafik umschlossen. Innerhalb der Box ist ein Absatz mit dunkelgrüner Farbe.

Der Einsatz von opacity

Nun weise ich dem Absatz eine Deckkraft von 60% zu:

Hier kommt opacity zum Einsatz!

Da sich an den CSS-Anweisungen für die div-Box nichts geändert hat, gibt es im folgenden nur der CSS-Code des Absatzes:

p {
    background: #008080;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    padding: 25px;
    opacity: .6;
}

Mit opacity: .6; erreiche ich eine 60%ige Deckkraft. hierbei handelt es sich um die verkürzte Schreibweise, wo auf die führende Null verzichtet wird. Mögliche Werte sind von 0 bis 1, was einer Deckkraft von 0-100% entspricht.

Das ganze ist auch für die aktuellen Versionen Internet Explorer möglich:

p {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
    filter: alpha(opacity=60); /*IE7 und kleiner*/
}
Foortgeschrittene CSS-Techniken
CSS-Buch

Wie man aber sieht, hat opacity einen Nachteil: die Eigenschaft wird an die Kind-Element vererbt. Damit hat auch die Schrift eine verringerte Deckkraft. Den Kind-Elementen einen Opacity-Wert von 100% zu geben wird nicht helfen, da sich diese 100% auf den Opacity-Wert des Eltern-Elements beziehen. Eine Möglichkeit, die man hier hätte, wäre wenn man das eigentliche Kind-Element außerhalb des Eltern-Elements unterbringt und dann mit Hilfe der absoluten Positionierung auf der teil-transparenten Fläche unterbringt.

RGBA und durchsichtiger Hintergrund

Das Problem mit der Vererbung hat RGBA nicht, hier eine 60%ige Deckkraft des grünen Hintergrundes:

Hier wird RGBA eingesetzt!

Obwohl dieses Beispiel die gleiche Durchsichtigkeit, wie das vorhergehende aufweist, so bleibt hierbei die Schrift unangetastet. Hier der entsprechende Code:

p {
    background: #008080; /* Fallback IE 6-8 */
    background: rgba(0, 128, 128, .6);
    color: #fff;
    font-size: 30px;
    padding: 25px;
}

Mit dem was ich in den letzten beiden CSS3-Artikeln – Abgerundete Ecken und Schatten für Text und Boxen – geschrieben habe, kann man so einiges kombinieren:

Hier wird RGBA eingesetzt! Kombiniert mit Border-Radius, Box-Shadow und Text-Shadow. Toll!

Ich habe hier einfach mal an einem sehr einfachen Beispiel abgerundete Ecken, Schatten für die Schrift und die Box kombiniert. Und Dank RGBA hat alles eine verringerte Deckkraft … auch der Schatten der Box. Und wie gehabt folgt der Code:

p {
    background: #008080; /* Fallback IE 6-8 */
    background: rgba(0, 128, 128, .6);
    color: #fff;
    font-size: 30px;
    padding: 25px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    -webkit-box-shadow: 3px 3px 5px #222;
    -moz-box-shadow: 3px 3px 5px #222;
    box-shadow: 5px 5px 7px #111;
    text-shadow: 2px 2px 1px #444;
}

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

7 Kommentare

  1. Sollte man in dem RGBA-Beispielcode nicht auch noch mal die Hintergrundfarbe normal definieren? Sonst würde im IE doch die Box transparent bleiben und nicht in der Farbe (#008080) erscheinen, was ja meist sinnvoller ist.

    1. Hallo Torsten,

      Sollte man in dem RGBA-Beispielcode nicht auch noch mal die Hintergrundfarbe normal definieren? Sonst würde im IE doch die Box transparent bleiben und nicht in der Farbe (#008080) erscheinen, was ja meist sinnvoller ist.

      in unserem Beispiel ja, weil im IE sonst weiße Schrift auf hellem Hintergrund eingeblendet wird. Sind beide Hintergründe lediglich Variationen eines dunklen Hintergrundes, dann muss man nicht einen Fallback für den IE definieren. Siehe oben rechts im Kopfbereich die Info-Box.

  2. Hmm, in meinem IE 8 erscheint in den Beispielen 3 + 4 keine Hintergrundfrabe. Nur weiße Schrift auf dem grau-weiß karierten Grund.
    Ich habe mir auch mal bei einigen anderen Webseiten (alles keine speziell EDV-affinen Seiten) die Browser-Statistiken angesehen. Dort haben die IE’s (Ver 8 +7) über 45 – 55 % Anteil.

    Daher werde ich dort auf die tollen Tipps meist verzichten müssen, oder brauche eine Lösung (wie mit den abgerundeten Ecken) mit der ich leben kann, wenn es im IE nicht ganz so schön aussieht.

    Das heutige Beispiel jedoch muss bei mir wohl vorerst außen vor bleiben. Schade …

    Gruß
    Oliver

    1. Hallo Oliver,

      Hmm, in meinem IE 8 erscheint in den Beispielen 3 + 4 keine Hintergrundfrabe. Nur weiße Schrift auf dem grau-weiß karierten Grund.

      Es fehlte ein Fallback für den IE 6-8. Jetzt ist er drin. Jetzt bekommen diese Browser einen normalen Hintergrund.

      Daher werde ich dort auf die tollen Tipps meist verzichten müssen, oder brauche eine Lösung (wie mit den abgerundeten Ecken) mit der ich leben kann, wenn es im IE nicht ganz so schön aussieht.

      Es gibt da mehrere Ansätze dem IE so etwas beizubringen. Eine habe ich im Artikel genannt, z. B. den Filter für die IEs für den Opacity-Wert. Sonst gibt es einige Javascript-Lösungen, wie z. B. CSS3 PIE, dies kann aber so weit ich das sehe kein RGBA, dafür aber Box-Shadow und Verlauf.

  3. WoW, ich liebe CSS3!

    Damit sind soviel geile & geniale Sachen möglich, da bekomme ich ab und an immer zu wieder große Augen, wenn ich manch Beispiele sehe. Wenn ich mir dann noch Apple mit dessen HTML5 Beispielen anschaue, waaahhh. :mrgreen:

  4. Wenigstens RGBA-Farben für Hintergründe lassen sich in den IEs über den Mißbrauch des Gradient-Filters erreichen.

    Wichtig zu wissen: Dabei wird Cleartype für die Schriftglättung des Elements außer Kraft gesetzt. Im IE8 lässt sich das aber wieder in Gang bringen, indem man den Text, der im Element mit dem Filter sitzt in ein weiteres Unterelement verfrachtet, und diesem die CSS-Eigenschaft position: relative; verpasst.

  5. Muss mich ja noch nachträglich bedanken: Aus diesem Artikel habe ich für das Design meines Blog-Themes gelernt.

    Wahrscheinlich würde das jetzt entweder anders aussehen, weil ich die ganzen Transparenzen vermieden oder umständlich was mit PNGs erstellt hätte… 🙂

Kommentare sind geschlossen.