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

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 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:

opacity:0.9;

Przykłady:

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

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.

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 – przezroczystość

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;

background: transparent;

aaaaaaaaaaaaaa aaaaaaaaa

background: #ccc;

aaaaaaaaaaaaaa aaaaaaaaa

===

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

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