[CSS] Przezroczystość z użyciem CSS

W dzisiejszym tutorialu przedstawię sposoby na wykorzystanie przezroczystości na stronach WWW z użyciem samego CSS, bez użycia obrazków.

Wykorzystamy do tego nową technikę CSS3 czyli pobieranie kolorów z palety RGBA, a także technikę bez użycia tej palety (ta technika jest wymuszona przez IE).

Zaczniemy od punktu pierwszego naszego programu, czyli:

  1. Przezroczystość czcionek

    Aby uzyskać przezroczyste czcionki należy skorzystać z następującego kodu CSS:

    #bg p {
    	padding: 5px;
    	color: rgba(255,255,255,0.5);
    	filter: alpha(opacity=50);
    }

    Taki zapis ustawia kolor czcionki na biały z pół-przezroczystością (wartości 0.5 oraz 50).

    Filter:alpha() odpowiada za przezroczystość w IE.

    Przykład --> Demo 1

  2. Przeźroczystość tła - wszystkie przeglądarki poza IE

    W tym przypadku użyjemy następującego kodu:

    #bg2 p {
    	padding: 10px;
    	width: 300px;
    	height: 300px;
    	overflow: hidden;
    	margin: auto;
    	background: rgba(255, 255, 255, 0.5);
    	filter: alpha(opacity=50);
    }

    Ten przypadek jest podobny do powyższego, tyle że stosujemy paletę kolorów RGBA do background zamiast color.

    Przykład --> Demo 2

  3. Przezroczystość tła (inny sposób) - wszystkie przeglądarki

    Tu musimy użyć nastepujących konstrukcji:

    <div id="transbox">
    <div>Etiam varius, quam interdum augue. Maecenas nunc. Phasellus a pellentesque leo. Donec eu turpis vulputate tortor et lorem. Sed neque. Maecenas pharetra lobortis magna diam, tincidunt enim. Sed fringilla odio. Suspendisse eu pulvinar gravida, nisl risus, consequat faucibus, tortor venenatis consequat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque facilisis congue. Nam hendrerit. Maecenas eget wisi eu lorem. Praesent commodo porta. Sed ac purus. Sed a erat. Sed eu auctor odio. Ut sit amet enim. Duis neque vel lorem. Phasellus ornare non, iaculis pretium felis adipiscing elit. Vestibulum ante ipsum non leo. Donec ipsum eget.</div>
    </div>

    Kod CSS do tego przykładu:

    #transbox {
    	width: 300px;
    	margin: 0 auto;
    	background-color: #fff;
    	filter:alpha(opacity=50);
    	opacity: 0.5;
    	-moz-opacity:0.5;
    }
    #transbox div {
    	padding: 20px;
    	color: #000;
    	filter:alpha(opacity=100);
    	opacity: 1;
    	-moz-opacity:1;
    }

    Jak widać, odeszliśmy tu od palety kolorów RGBA, a zaczęliśmy korzystać z filtrów które są specyfiką każdej z przeglądarek. To znaczy -moz-opacity dla Mozilla Firefox, opacity dla Opery oraz filter:alpha() dla Internet Explorera.

    Przyklad --> Demo 3

Mam nadzieję, że jasno opisałem sposoby na otrzymanie efektu przezroczystości w przeglądarkach.

W razie jakichkolwiek pytań, proszę pisac w komentarzach.

  • Firefox już dawno nie potrzebuje przedrostka -moz- , starsze wersje pewnie tak ale wypada o tym napisać.

  • Tak, ale zakładamy wtedy, że wszyscy korzystają z najnowszej wersji FF.

  • E2A

    Ogolnie interujace sposob (Demo 1), z RGBA, jak narazie uzywalem tylko opacity:0.5; ale nie wiedzialem o tym rgba 🙂 ogolnie pisze maly kod ktory robi efekt przedroszystego czarny tlo, i na niego bialy boxa, wiem ze to nic trudnego, ale wlasnie przyszlo mi do glowy zeby zrobic efekt w ktorym czarny tlo w sposobu ciaglego zrobil sie ciemniejszy tzn np opacity 0 do 0.5 tak samo jak filter (dla IE) od 0 do 50, oraz ten bialy box to z width 0% do 90% tak samo przez „animacje”, oczywyscie to zrobilem za pomoca DHTMLu, zeby zmienic wartosci przedroszystosc to troche sobie zlamalem glowe szukajac jak to zrobic, bo z opacity bylo ok wystarczylo …ById(‚el’).style.opacity, ale dla filter to bylo innaczej: …ById(‚el’).filters.alpha.opacity, oprocz tego ich wartosc nie jest number tylko string, no to czeba narpier skonwertowac te wartosci na numery zeby pozniej ich powiekszyc lub zmniejszyc, problem glownie jest w powiekszeniem bo trzeba pamietac ze ze znakiem +, to odpowiada na 2 rozny operacje: jedna jest dodawanie, a druga konkatenacja, a bo wartosc opacity jest stringiem to jezeli zrobimy np opacity+10 to nowa wartosc moze byc: „010” jako string i to spowoduje bledy, „tryk” ktory gdzies znalazlem to jest pomnozyc opacity razy 1, zeby ciag automatycznie zrobil sie numeryczny i pozniej dodac wartosc ktora chcemy zeby sie powiekszylo.

    Napisalem to wszystko jezeli ktos bedzie chcial z tym sie pobawic i musial spedzac za duzo czasu w tym, oprocz tego jezeli nie uzywa sie opacity, a zamiast uzywamy rgba, ciekawe jak w javascript bedzie to mozna zmienic wartosci, to znaczy otrzymac ta wartosc lub/oraz ja zmienic, szukalem z necie i zlanalem to: …style.color = ‚rgba(1,5,13,0.44)’; ale jeszcze go nie potestowalem…

  • Co jak co ale większość osób stara się korzystać z najnowszej. Zresztą kiedy to bylo… opacity: 0.5 w zupełności wystarczy. Zapomniałeś wspomnieć, ze powyżej zaprezentowany kod nie przejdzie walidacji oraz tego, ze mozna to rozwiązać za pomocą PNG. Haczyk jest taki, ze trzeba zastosować: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img.png’, sizingMethod=’crop’);

  • Roman

    A jak pozbyć się alertu o zagrożeniu (ActiveX) w IE?

  • W którym momencie się on pojawia?

  • Roman

    Przy uruchamianiu strony, u góry: „Aby pomóc w zapewnieniu bezpieczeństwa program IE ograniczył tej stronie uruchamianie skryptów ActiveX …”

    Po zezwoleniu na uruchamianie skryptów tło jest przeźroczyste.

  • janka

    Ogolnie wszystko dziala, tylko zastanawiam sie jak zrobic by same tlo bylo lekko przezroczyste, natomiast tekst i zdjeciena nim nie.

  • Comandeer

    Spójrz na demo 3. Zawsze możesz jako tło wstawić półprzezroczystego PNG

  • Szymon

    Niestety to z alpha, być może działa na innych ie, ale na ie 8 nie hula (przeźroczystość tekstu). Interesuje mnie właśnie ta szczegółowa opcja: jak to powinno być napisane, by działało na ie 8. Jeśli ktoś zna odpowiedź to prosiłbym bardzo o prędkie podzielenie się wiedzą. W internecie znalazłem wiele pomysłów, ale kiepskich (poza tym głównie dla obrazków). Będę naprawdę wdzięczny za rychłą wiadomość (najlepiej na wczoraj 🙂 ).

  • [email protected]

    jak narazie uzywam poprostu odpowiednio przygotowanej grafiki, która sprawia wrażenie przeźroczystości, ale chciałbym to zmienić i zrobić jak wyżej napisane. próbowałem już to zrobić, ale nie wiem jak wydzielić tylko treść strony, aby tylko tam była przeźroczystość:) moje próby skończyły sie tym że cały container (łącznie z header and footer) robią się przeźroczyste:) pozdrawiam i dziękuję za dobre rady:)

  • sadistic_son

    Witam,
    Z przykrością stwierdzam, że przykład 3 nie działa tak jak należy. Owszem tło jest przezroczyste i przy opacity:0.5 i kolorze tekstu #000 wygląda ok, jednak przy opacity:0.1 tekst jest już ledwo czytelny. Atrybuty przezroczystości można zupełnie wyrzucić z #transbox div a wszystko wygląda tak samo. Otóż wygląda na to, że tekst przyjmuje (uśrednia) swoją przezroczystość na podstawie rodzica. Stąd 1 dla potomka przy 0.5 u rodzica nie daje pełnego krycia. 0.5 u potomka przy 0.5 u rodzica daje jeszcze mniej dla potomka niż 0.5 dla bloku nie będącego wewnątrz już przezroczystego bloku.
    No chyba, że coś źle robię ale ciężko jest zrobić błąd przy CTRL C, CTRL V.
    Pozdrawiam.

  • dzięki wielkie za zwrócenie uwagi na ten aspekt

  • BArtek

    witam, jeśli można, to nie wiecie przypadkiem jak skonfigurować przeźroczystość tak, aby odnosiła się wyłącznie do tła, a nie do tekstu?

  • Łukasz

    Może i nie działa do końca tak jak chciałem chodzi o przezroczystością tekstu – ale jest to cenna wskazówka i dzięki wielkie za podzielenie sie wiedzą.

  • webowiec.net/blog/css-przezroczyste-tlo/
    Ale jestem z siebie dumna, kilka godzin szukania i jest odpowiedź na Wasze wszystkie pytania, przezroczystość tła wyświetla się w każdej przeglądarce, jest nie dziedziczona na potomków. Jedyny mankament na wskazanej stronie jest tylko dla czarnego i białego koloru tła, ale to i tak dużo, poza tym jak ktoś poszpera to znajdzie, pozdrawiam.

  • trzecie rozwiazanie jest słabe, tak naprawdę dla #transbox div jest opacity: 0.5 a „opacity:1” jest zbędne i nic nie zmienia. Co doskonale widać na DEMO 3.