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:
background-color: rgba(200, 200, 200, 0.5);
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:
Są na to dwa sposoby:
- jako tło można użyć przeźroczysty obrazek PNG (nie działa w IE 6 i starszych),
- 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.
background-color: rgb(200,200,200); background-color: rgba(200, 200, 200, 0.5); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7fc8c8c8', endColorstr='#7fc8c8c8');
Stosując powyższy kod otrzymujemy następujący efekt:
