RGBa: jak zrobić kanał alfa (przezroczystość) w CSS?

Przezroczystość jest jedną z tych dziwnych rzeczy, które każda przeglądarka traktuje po swojemu. Od dawna w CSS dostępny atrybut opacity sprawia webmasterom wiele problemów. Zmusza wszystkie elementy potomne do tego, by również były przezroczyste, a jego obsługa w różnych przeglądarkach jest dość kłopotliwa – tak, że właściwie trzeba pisać kilka oddzielnych własności.

Istnieje jednak sposób na takie zadeklarowanie koloru w CSS, że będzie on obsługiwał kanał alfa (przezroczystość). Wygląda on następująco:

background: rgba(200, 200, 200, 0.5);

dzięki RGBa można łatwo stworzyć przezroczystą warstwę, która w żaden sposób nie będzie wpływała na jej potomne elementy. Pierwsze trzy wielkości określają kolor warstwy w przestrzeni RGB (przyjmując wartości od 0 do 255), zaś ostatnia określa stopień przezroczystości.

Na początku zdefiniujmy w arkuszu stylów klasę dla obrazka, na który nałożymy przezroczystą warstwę:

.obrazek { width: 200px; height: 300px; position: relative; }

a następnie klasę dla samej warstwy przezroczystości:

.alfa { position: absolute; width: 180px; height: 280px; top: 10px; left: 10px;

/* w razie problemów */
background: rgb(200, 200, 200);

/* przezroczystość */
background: rgba(200, 200, 200, 0.5);

}

Niektóre niezbyt kompatybilne ze standardami przeglądarki – przede wszystkim Internet Explorer 6, 7 i 8 – nie radzą sobie z RGBa. Dlatego powyżej zadeklarowaliśmy kolor, który można zastosować na wszelki wypadek, gdyby RGBa nie było obsługiwane.

Jak widać, rozmiary warstwy alfa są mniejsze od rozmiarów obrazka. Przytoczony tu kod należy przystosować do własnej grafiki.

Następnie w HTML-u umieszczamy przykładowo taki kod:

<div class="obrazek">
<img src="ptaszek.jpg">
<div class="alfa">Ptaszki</div>
</div>

Powinniśmy uzyskać następujący efekt:

Jak widać, napis nie jest przezroczysty.

Metoda ta działa z Firefoksem 3, Google Chrome, Operą 10 i Safari 3.

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

15 skomentuj »

Komentarze

#1 Kornel 2009-02-06 18:16:42 0
"Firefoksem 3, Google Chrome, Operą 10 i Safari 3."

Takie stwierdzenie sens całego artykułu stawia pod duzym znakiem zapytania. Jego przydatnosc dla webmastera spada prawie do zera. Czy lubimy IE czy nie liczyc sie z nim musimy...
IP: 79.189.92.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
#2 eimi^® 2009-02-06 19:17:50 0
Musimy dlatego, że niektórzy uważają, że musimy :). Naprawdę, nie musimy. Nie każdy musi robić strony działające w IE. Nie każdy potrzebuje.

Rozwiązanie daje coś dla użytkowników przeglądarek radzących sobie ze standardami i awaryjną obsługę dla przeglądarek, które tego nie potrafią.
IP: 88.156.95.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5 GTB5
#3 Kornel 2009-02-06 20:25:13 0
Stwierdzenia "musimy" użyłem w znaczeniu "musza Ci którzy serwisy www tworza zawodowa". Spróbuj wytłumaczyć PMowi projektu, że obrazki w png nie beda miały przeźroczystości tła bo IE6 sobie z tym nie radzi ;-).
IP: 79.189.92.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
#4 eimi^® 2009-02-06 21:03:35 0
Zawodowo - czyli dla zarobku? To już zależy od twoich osobistych zdolności perswazji. Wmówić człowiekowi można naprawdę wiele.

polecam ostatnią prezentację Johna Resiga, twórcy jQuery. W pewnym miejscu pisze on o strategiach radzenia sobie z bałaganem przeglądarkowych technologii. Pierwszą z nich jest "pick your browser". Po prostu nie opłaca się wszystkiego obsługiwać.

Uruchamiając niemały przecież serwis, jakim jest Webhosting, doszliśmy do wniosku, że nie opłaca się nam obsługiwać IE6 (ani innych egzotycznych przeglądarek typu Amaya :D). Czy Ty Kornelu tworząc strony WWW starasz się zapewnić obsługę dowolnie przestarzałego browsera? Też chyba nie, wyznaczasz sobie granice.
IP: 88.156.95.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5 GTB5
#5 pako^® 2009-02-07 09:08:16 0
Gdy dział marketingu otwiera IE i sprawdza jak strona wygląda w tej

genialnej przeglądarce, a potem biegnie i krzyczy, że coś nie działa,

to jednak "musimy".

Zresztą to ma racjonalne uzasadnienie w słupkach, nie można ignorować ~35% klientów posiadających IE.

Zakładam,

że webhosting.pl ma niższy udział IE w swoich statystykach i świadomość

userów na wyższym poziomie, więc mógł sobie IEowców zignorować.
IP: 213.156.117.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008122011 Iceweasel/3.0.5 (Debian-3.0.5-1)
#6 pako^® 2009-02-07 09:10:27 0
Swoją drogą przydałoby się przy dodawaniu komentarza dodatkowe pola na login/hasło do automatycznego logowania.

A, i coś nie mogłem wyedytować swój komentarz powyżej ;-)
IP: 213.156.117.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008122011 Iceweasel/3.0.5 (Debian-3.0.5-1)
#7 castor 2009-02-07 09:15:55 0
ale nie porownoj jakiegos Amaya z IE6, ktorego uzywa za duzy procent userow, aby go olewac. Jasne ze byloby fajnie jaby kazdy mial safair czy ff, ale niestety tak nie jest i - tak jak napisal Kornel - sproboj wytlumaczyc klientowi, ktory placi kilkadziesiat tysiecy za projekt, ze nie warto sobie zawracac glowy 30-40% uzytkownikami, ktorzy korzystaja z IE6 ...
IP: 81.190.40.[...] Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_5; pl-pl) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.20.1
#8 castor 2009-02-07 09:16:48 0
o, pako mnie ubiegł :-)
IP: 81.190.40.[...] Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_5; pl-pl) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.20.1
#9 eimi ibn eimi 2009-02-07 09:37:07 0
1. Jeśli klient zapłacił kilkadziesiąt tysięcy za projekt, to można zrobić dwa frontendy - jeden dla przeglądarek, a drugi dla Internet Explorera, jeśli klientowi na tym zależy.

A jeśli robimy coś, co nie ma takiego budżetu, to najlepszym rozwiązaniem jest moim zdaniem zrobienie minimalnego frontendu dla IE, który wyświetla treści ze strony w skrajnie uproszczonej graficznie formie, wraz z komunikatem, "twoja przeglądarka niczego nie potrafi. popsuła się", zrzutem ekranu z głównej wersji strony i linkami do FF, Opery, Chrome i Safari.

Ile lat jeszcze chcecie utrzymywać przy życiu IE6? Poniżej jakiego udziału musi spaść ta przeglądarka, aby wciąż inwestować w nią swój czas? 10%? 5%? Jeśli wszyscy będą starać się spełnić KAŻDĄ perwersję klientów, to IE6 nie odejdzie nigdy.
IP: 88.156.95.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5 GTB5
#10 pako^® 2009-02-07 16:41:01 0
@eimi ibn eim: utrzymywać drugi front-end dla samego IE? To dopiero byłoby niedorzeczne, gdzie dla każdej podstrony/szablonu graficznego trzeba robić drugi, specjalnie dedykowany IE.

Z życia wzięte: dzwoni klient i mówi, że mu coś w IE6 nie działa, pada pytanie dlaczego IE7 nie zainstaluje, a klient odparł, że w jego firmie wszyscy są przyzwyczajeni do IE6.

Trzeba to po prostu przecierpieć i mieć dobrego kodera CSS+XHML.
IP: 213.156.117.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008122011 Iceweasel/3.0.5 (Debian-3.0.5-1)
#11 equw 2009-02-08 01:38:48 0
> To dopiero byłoby niedorzeczne, gdzie dla każdej podstrony/szablonu graficznego trzeba robić drugi, specjalnie dedykowany IE.

W większości przypadków, próba obsłużenia IE i tak konczy sie zrobieniem odzielnego css'a (i niektorych elementow), bądź koniecznoscia dodania klocka w postaci JS wymuszajacego na przegladarce okreslone zachowanie. Czyli obsługując IE5/6 robimy odzielny, dedykowany tym aplikacjon front-end.

Tak mnie natchelo by sie czepic.
IP: 86.63.144.[...] Opera/9.63 (Windows NT 6.0; U; pl) Presto/2.1.1
#12 Marek^® 2009-02-16 21:57:00 0
Pomimo "zawodowego zrozumienia" z mojej strony tego, że jak najbardziej słuszne jest wspieranie nowych trędów, to..

Do ciekawego wniosku można dojść po nastrojach panujących na forum, otóż: nie wolno olewać 30% użytkowników jednych przeglądarek, ale jak najbardziej należy olać 30% innych użytkowników.

Za karę?
IP: 83.14.160.[...] Opera/9.63 (Windows NT 5.1; U; pl) Presto/2.1.1
#13 pako^® 2009-02-17 19:02:12 0
@Marek: nie bardzo rozumiem, co masz na myśli.
IP: 213.156.117.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008122011 Iceweasel/3.0.5 (Debian-3.0.5-1)
#14 Kylo.el 2009-02-18 14:02:26 0
Mam wrażenie, że @Markowi chodzi o to, że np IE nie obsługuje jakiejś rzeczy. Teraz my jej nie wykorzystamy na stronie mimo że inne przeglądarki ją obsługują, polepsza to funkcjonalność, ale ludzie tego nie dostaną mimo, że mają rozwijaną i dobrą przeglądarkę, a nie crapware który tego nie obsługuje. I z tym się zgodzę (nie wiem czy jasno to opisałem, ale chyba wiadomo o co mi chodzi).
IP: 83.28.251.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729) Ubiquity/0.1.4
#15 WebJoker 2009-02-19 18:09:43 0
Why So Abandonware, Son,

Why So Abandonware?

;>
IP: 82.210.190.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 Ubiquity/0.1.5

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.