rgba auch für den IE6
Eine der segensreichen Neuerungen von CSS3 ist Vergabe von Transparenz über das Farbmodell rgba. Die sonst nutzbare opacity wirkt sich leider auch auf Kindelemente aus, sodass nicht nur eine Box einen halbtransparenten Hintergrund hat, sondern leider auch jeglicher Text oder Bilder in ihr. Bei rgba passiert dies nicht. Nur das Objekt, dem eine Farbe mittels rgba zugewiesen wurde, zeigt diese auch in der gewünschten Form. Leider hat Microsoft diese Technik wie alle anderen guten und wichtigen Techniken erst in Version 9 des Internet Explorers integriert. Doch es gibt Abhilfe mit dem Microsoft-eigenen Gradient-Filter. Dieser Filter transportiert nicht nur Farbinformationen, sondern auch Transparenzinformationen. Also weist man einem Objekt einfach einen Verlauf von einer Farbe auf sich selbst zu und vergibt zusätzlich noch einen Alphawert, schon hat man rgba auch für den alten IE bis Version 6 (oder sogar tiefer) nachgestellt.
Doch wie kommt man auf den Transparenzwert "7f"? Der Farbwert des Filters ist in hexadezimaler Schreibweise verfasst. Im Falle der Farbe wird aus rgb(0,0,0) einfach #000000. Für den heexadezimalen Transparenzwert multipliziert man 255 (der maximale RGB-Wert) mit der Transparenz (also 255*0.5). In diesem Falle bekommen wir 127.5 als Ergebnis. Wir benötigen eine ganze Zahl und müssen uns deshalb für Auf- oder Abrunden entscheiden. Dann suchen wir einen Zahlenkonverter auf und lassen uns den Dezimalwert in einen Hexadezimalwert wandeln. "127" wird dann zu "7f", 128 wird zu "80". Diesen Wert stellen wir an den Anfang des Hexadezimalwertes im MS-Filter.
Nutzer von Präprozessoren wie Sass haben hier natürlich die Nase vorn, denn sie können diesem die Rechenarbeit überlassen.
Anhand der Formatierung einer Überschrift und eines über einem Bild liegenden Textes kann man den grossen Vorteil von rgba sehr gut ermessen. Die jeweils erste Version ist mit opacity, die zweite dann mit rgba formatiert.
- ← Previous
Lehrreicher Quiz - Next →
Dr. Web praktiziert wieder richtig