Jak uzyskać na stronie efekt przezroczystości? [CSS]

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


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

Efekt przezroczystości na stronie internetowej można bardzo łatwo i szybko uzyskać. Nie potrzebujemy do tego żadnych grafik wystarczy jedynie znajomość CSS. W zależności od tego jaki końcowy efekt chcemy uzyskać, musimy do tego zastosować inną metodę CSS. W tym wpisie pokażę wam 3 sposoby uzyskania przezroczystości. Każdy z nich działa inaczej i przydaje się w innym miejscu.

Przezroczysty kontener wraz z zawartością – opacity

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

Wartość właściwości CSS opacity ustawiamy między 1 a 0. Gdzie 1 to pełna widoczność a 0 całkowita przezroczystość. W celu uzyskania prześwitu używamy wartości ułamkowych np:

Przykłady:
Z opacity:0.0;

aaaaaaaaaaaaaa aaaaaaaaa

W tym przypadku mój kontener jest pozornie całkowicie pusty. Jeśli jednak spróbujecie sprawdzić jego zawartość okaże się, że zawiera niewidzialny tekst.


Z opacity:0.5;

aaaaaaaaaaaaaa aaaaaaaaa

Z opacity:0.9;

aaaaaaaaaaaaaa aaaaaaaaa

A teraz opacity:1;

aaaaaaaaaaaaaa aaaaaaaaa

Domyślnym ustawieniem jest tutaj wartość „1”. Podobne działanie będzie miała właściwość CSS Filter

Kolory rgba – przejrzystość dla tła

Kolejnym sposobem na uzyskanie efektu przezroczystości są kolory RGBA.

Ten sposób w istotny sposób różni się od poprzedniego. 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

 

===

Gradient (różnokolorowy, ombre) tekst na stronie [CSS][HTML]

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