|

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

przezAurelia Sypniewska
Czas czytania: 2 minut

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 do jakiegoś obiektu wszystkie inne obiekty, elementy mieszczące się w nim jak i on sam staną się w mniejszym lub większym stopniu przezroczyste. W zależności od ustawionej wartości opacity.

Wartość właściwości CSS opacity ustawiamy między 1 a 0. Gdzie 1 to pełna widoczność a 0 całkowita przezroczystość. Wartości pomiędzy to częściowa widoczność. Właściwość ta nie nadaje się więc zbytnio do robienia przezroczystego tła ale za to świetnie może się sprawdzić do ukrywania różnych elementów (a potem ich pokazywania np. przy animacjach). W celu uzyskania prześwitu używamy wartości ułamkowych np:

opacity:0.9;

Przykłady:

Poniżej znajdziecie przykłady zastosowania właściwości opacity od większej do mniejszej przezroczystości.

See the Pen
by Aura (@Julka85)
on CodePen.0

Domyślnym ustawieniem jest tutaj wartość „1”. Podobne działanie będzie miała właściwość CSS Filter. Jak widać na przykładzie na samym początku praktycznie nic nie widać. Zarówno <div> (kontener) jak i tekst są całkiem przezroczyste. Zmieniając wartość przechodzimy aż do pełnej widoczności.

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 samego tła elementu i nie wpływa na mieszczące się w nim obiekty. Kolory rgba posiadają takie same oznaczenia co w rgb różnią się jedynie ostatnim parametrem. np.

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

See the Pen
background: rgba(0,0,0,0.2); by Aura (@Julka85)
on CodePen.0

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 – całkowita przezroczystość tła

Jest to kolejna funkcja umożliwiająca uzyskanie tym razem całego przezroczystego tła – bez manipulacją jego intensywnością. Czyli tło jest widoczne lub nie jest. Słowem transparent zastępujemy tutaj dowolny kolor.

background: transparent;

background: transparent;

aaaaaaaaaaaaaa aaaaaaaaa

background: #ccc;

aaaaaaaaaaaaaa aaaaaaaaa

===

Czy można uzyskać przezroczystość w HTML?

Efekt przezroczystości uzyskujemy głównie z pomocą CSS. Nie używamy do tego HTML. HTML w tym przypadku jest bowiem tylko konstruktem, który dalej obrabiamy.

źródła

https://www.aurainweb.pl/2019/08/gradient-roznokolorowy-tekst-na-stronie-csshtm/

dodatkowe tagi – czyli powiązana tematyka:
przezroczyste tło witryny z pomocą CSS
prześwitujące tło pod spodem tekstu lub obrazu
jak zrobić bardziej przezroczyste tło
jak zmienić przejrzystość (widoczność) tła na stronie internetowej