Hauptmenü

Untermenü

CSS3 - Hintergrund - Deckkraft

1. Zunächst die gute Nachricht

Transparenz wird in seiner originären Form von allen modernen Browsern verstanden. Man benötigt hier also keine Vendor-Präfixes. Erreicht wird das mit der folgenden Eigenschaft.

Und nun die schlechte Nachricht

Leider haben bei der Spezifikation mal wieder ein paar verantwortliche Leute nicht(!) an die armen Webentwickler gedacht und sich etwas ausgedacht, was eigentlich ziemlich daneben ist. Die Details dazu kommen gleich, erst mal geht's ans Eingemachte.

2. opacity

Die Anweisung dazu selber ist denkbar knapp.


.transparent {
  opacity0.5;
}

Beim Wert gibt es den Bereich von 0 (ganz durchsichtig) bis 1 (nicht durchsichtig). Durch Angaben hinter dem Punkt kann man dann die entsprechenden Abstufungen vornehmen.

Und nun das große aber

opacity funktioniert ähnlich wie display. Es wirkt sich nämlich auf alle Unterelemente aus und lässt sich nicht überschreiben. Dazu mal zwei Beispiele, bei denen ich den angezeigten Code aber auf das Notwendigste reduziert habe.

Beispiel

Bla blubb
moi

.bg {
  backgroundurl(../../pics/css/transparent.gif);
}
.transparent {
  background#fff;
  opacity0.5;
}
<div class="bg">
  <div class="transparent">Bla blubb</div>
</div>
<div class="bg">
  <div class="transparent">
    <img src="../../pics/css/moi.jpg" width="100" height="100" alt="moi" />
  </div>
</div>

Erläuterung

Wie ihr besonders an dem Beispiel mit dem Bild sehen könnt, ist der Inhalt(!) nun ebenfalls transparent. "kluge" Leute (so wie ich) kämen nun auf die Idee, einfach dem Inhalt ein opcacity: 1; zu geben. Leider funktioniert das nicht. Denn in dem Fall wird der Wert 1 mal genommen mit dem opacity-Wert des übergeordneten Elements. Und 1 x 0.5 ergibt immer noch 0.5. Außerdem ist die Maximalangabe auf 1 beschränkt.

Das Prinzip muss man sich so vorstellen wie beim schon erwähnten display. Verpasst man einen Element nun ein display: none;, kann man ruhig allen untergeordneten Elementen ein display: block; verpassen. Es nutzt nichts. Als Alternative kann man mit position arbeiten, aber das artet oft ziemlich aus und ist deshalb nicht sonderlich verlässlich. Gottlob gibt es für solche Fälle eine Alternative.

3. rgba

Auch das wurde meines Wissens mit CSS3 eingeführt. Dabei handelt es sich um den bekannten Farbraum Red Green Blue. Und das A steht in diesem Fall für den Alpha-Kanal, also die Transparenz. Dabei macht es keinen Unterschied, ob man das nun groß oder klein schreibt. Ach ja, mit Hintergrundbildern kann man hier beim "Transparent"-Element natürlich nicht arbeiten.

Beispiel

moi

.rgba {
  backgroundrgba(2552552550.5);
  color#000;
  padding10px;
}
<div class="bg">
  <div class="transparent">
    <img src="../../pics/css/moi.jpg" width="100" height="100" alt="moi" />
  </div>
</div>

Wie ihr sehr schön sehen könnt, bezieht sich in diesem Fall die Transparenz nur auf das eigentliche Element und nicht auf dessen Kinder. Leider kommt der IE 8 und abwärts damit nicht klar. Aber die beherrschen auch kein opacity. Trotzdem gibt es auch dafür eine Lösung.

4. filter

Funktioniert im 8er. Allerdings unterscheiden sie sich in der Schreibweise. Die Wirkung ist leider dieselbe wie bei opacity.


/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* das noch rückständigere alte Kroppzeuch */
filteralpha(opacity=50);    

Ein Tipp

Auch wenn den praktisch schon sehr viele Leute kennen, so will trotzdem noch mal darauf hinweisen. Im Notfall nimmt man ein 1x1 Pixel großes transparentes PNG und legt es in den Hintergrund. Das funktioniert in allen Browsern, ist leicht umzusetzen und man kann anstelle von Hintergrundfarben auch mit speziellem Bildern arbeiten. Und wie groß wie die sind, ist egal.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt