Półprzezroczyste tło nawet w IE

Niedawno wspominałem o rozciąganiu tła na całą stronę - tym razem chcę również poruszyć temat tła, jednak jednolitego i półprzezroczystego. CSS3 w swojej opracowywanej specyfikacji zawiera wsparcie dla kanału alpha, pozwalając definiować kolory w postaci rgba(255,255,255,0.8). Większość przeglądarek - jak Firefox, Opera czy Chrome posiadają już wsparcie dla tej metody od dłuższego czasu, ale jak zwykle pozostaje pytanie: co z IE? Otóż należy zastosować "magiczne" filtry Internet Explorer'a...

To jest demo półprzezroczystości (IE)

Jeżeli chcemy użyć półprzezroczystego tła na stronie (bez obrazków) to warto wypróbować poniższe metody - w zależności od przeglądarki:

• CSS3 - rgba() lub opacity
• Filtry MSIE

CSS3

Standard CSS3 pozwala na zdefiniowanie kanału alpha, wraz z podawaniem składowych rgb - wówczas zamiast pisać rgb dodajemy a na końcu i podajemy 4 dane (alpha ma zakres od 0 do 1)

background: rgba(255,255,255,0.05)

Innym wyjściem jest zrobienie całego obiektu półprzezroczystego właściwością opacity - jednak należy pamiętać, że content także będzie półprzezroczysty.

opacity: 0.1;

To jest demo półprzezroczystości

Filtry MSIE

Jeżeli chcemy, aby półprzezroczystość była widoczna w IE (także w IE6), konieczna jest zabawa wbudowanymi filtrami IE, a dokładniej DXImageTransform.Microsoft.Gradient. Sam zapis koloru używany w filtrze jest nieco dziwny i wygląda mniej więcej tak #AARRGGBB. Aby zdefiniować filtr dla IE tworzymy osoby arkusz CSS dla IE (umieszczając go np. w komentarzach warunkowych) i umieszczamy w nim definicję filtru - poniżej przykład

{
   background: transparent;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5186821,endColorstr=#A5186821)"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5186821,endColorstr=#A5186821);   /* IE6 & 7 */
   zoom: 1;
}

To jest demo półprzezroczystości (IE)

W celu szybkiej konwersji naszego kodu CSS3 możemy wykorzystać generator online - działa bardzo porządnie ;).

I w ten oto sposób możemy się cieszyć półprzezroczystością w zdecydowanej większości używanych przeglądarek internetowych.