Przezroczyste tło lub element z pomocą CSS

Kategoria wpisu Kurs CSS, Kursy, Tło Tagi: , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

CSS (kaskadowe style) oferują nam kilka sposobów na uzyskanie efektu przezroczystości na stronie internetowej. Poniżej postaram się kilka z nich przedstawić. Metody te są w większości obsługiwane przez przeglądarki, jednak starsze wersje mogą mieć pewne problemy (zalecane uaktualniaj przeglądarkę – wiem nie zawsze jest to możliwe 🙁 ).

Metoda na jaką się zdecydujemy powinna zależeć od naszych potrzeb – nie koniecznie będziemy chcieli robiąc przezroczyste tło uzyskać i przenikający tekst. Zapraszam do lektury.

opacity – przezroczysty kontener z zawartością

Właściwość CSS opacity sprawia, że przezroczyste staje się nie tylko tło, ale również cały kontener wraz z zawartością. Czyli po dodaniu tej właściwości na dany obiekt wszystkie inne obiekty mieszczące się w nim staną się również przezroczyste. np:

Z opacity:0.0;

aaaaaaaaaaaaaa aaaaaaaaa

Z opacity:0.5;

aaaaaaaaaaaaaa aaaaaaaaa

Z opacity:0.9;

aaaaaaaaaaaaaa aaaaaaaaa

Bez opacity:1;

aaaaaaaaaaaaaa aaaaaaaaa

Opacity przyjmuje wartości od 0 do 1, gdzie 0 to całkowita przezroczystość a 1 jej brak. Podobne działanie będzie miała właściwość CSS Filter

Kolory rgba – przejrzystość dla tła

Nieco inaczej jest w tym przypadku. Przezroczystość dotyczy jedynie obrębu samego tła. Kolory rgba posiadają takie same oznaczenia co w rgb różnią się jedynie ostatnim parametrem. np.

W RGB czarny to 0,0,0 a biały 250,250,250

background: rgba(0,0,0,0.0);

aaaaaaaaaaaaaa aaaaaaaaa

background: rgba(0,0,0,0.4);

aaaaaaaaaaaaaa aaaaaaaaa

background: rgba(0,0,0,0.7);

aaaaaaaaaaaaaa aaaaaaaaa

background: rgba(0,0,0,1);

aaaaaaaaaaaaaa aaaaaaaaa

W powyższych przykładach posiadamy możliwość manipulacją nasycenia. Służy do tego parametr z kropką (ostatni 4). W tym wypadku pełne nasycenie i brak przezroczystości to 1 czyli:

rgba(0,0,0,1) lub rgba(0,0,0,1.0)-> tło czarne brak efektu
opacity:1; -> brak efektu

Z kolei całkiem przezroczyste tło daje nam 0:

rgba(0,0,0,0) -> tło czarne całkowicie przezroczyste
opacity:0; -> tło całkowicie przezroczyste

Wartości pomiędzy brakiem przezroczystości a całkowitą to np. 0.5 0.2 0.8

Transparent

Jest to kolejna funkcja umożliwiająca uzyskanie tym razem całego przezroczystego tła. Słowem transparent zastępujemy tutaj dowolny kolor.

background: transparent;

aaaaaaaaaaaaaa aaaaaaaaa

background: #ccc;

aaaaaaaaaaaaaa aaaaaaaaa

 

===

 

dodatkowe tagi:
przezroczyste tło CSS
zmiana nasycenia tła
prześwitujące tło
przezroczystość, transparentne
kolor tła

Dodaj komentarz

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