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:

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:

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*/
}

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:

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:

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:

• CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float
• CSS3: Schriftgrößen mit rem angeben
• Linkschleuder 22: WordPress, CSS3, Schriften
• Linkschleuder 20: WordPress und CSS3
• HTML und CSS: lange Wörter in den Griff bekommen