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.
Co znajdziesz w tym wpisie
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;
background: #ccc;
===
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
