rgba(), hsla() w CSS 3 – problem z prze­źro­czy­sty­mi kolorami w IE

W CSS 3 razem z kolorem elementu możemy definiować również stopień jego przeźroczystości. Do tego celu służą rgba() (red, green, blue, alfa) lub hsla() (hue, saturation, lightness, alfa). Okazuje się jednak, że przeglądarka Internet Explorer w wersji 8 i starszej nie obsługuje określania koloru wraz ze stopniem przeźroczystości.

Poniższy styl:

ma zagwarantować półprzezroczyste szare tło pod napisem. Tak też jest w normalnych przeglądarkach. Niestety w IE 8 tła nie zobaczymy w ogóle:

tło rgba() w przeglądarce IE 8
tło rgba() w przeglądarce IE 8

Są na to dwa sposoby:

  1. jako tło można użyć przeźroczysty obrazek PNG (nie działa w IE 6 i starszych),
  2. w CSS można użyć specjalnego filtra działającego w IE.

Używając drugiej metody uciekamy się do pewnego tricku – definiujemy gradient zaczynający i kończący się tym samym kolorem (czyli nie będzie żadnego gradientu a jednolity kolor). Kolor (rgb(200, 200, 200)) zapisujemy w systemie szesnastkowym (c8c8c8), a przed kolorem dodajemy wartość dla kanału alfa (255*0,5 zaokrąglone i zapisane w systemie szesnastkowym). Dodatkowo na wszelki wypadek możemy dodać kolor w formie rgb(). Spowoduje to, że w starszych wersjach przeglądarek nie obsługujących rgba() i filtrów MS zobaczymy tło ale bez przeźroczystości.

Stosując powyższy kod otrzymujemy następujący efekt:

tło rgba() + filter w IE 8
tło rgba() + filter w IE 8

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

To prevent spam, URLs are not allowed in comments. All comments are moderated and subject to approval.
Aby zapobiec spamowi, adresy URL nie są dozwolone w komentarzach. Wszystkie komentarze są moderowane i podlegają zatwierdzeniu.