CSS Academy · Lekcja

Przezroczystość z opacity i RGBA

Ustawią Państwo przezroczystość elementów za pomocą właściwości opacity i wartości kolorów rgba().

Przezroczystość z opacity i RGBA to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Właściwość opacity

Właściwość opacity ustawia przezroczystość całego elementu, w tym jego elementów potomnych i zawartości. Wartości mieszczą się w zakresie od 0 (pełna przezroczystość) do 1 (pełna nieprzezroczystość).

<div class="overlay">Overlay at 50% opacity</div>

opacity wpływa na wszystkie elementy potomne

Najważniejsze zastrzeżenie: opacity wpływa na całe drzewo elementu. Tekst, obrazy i elementy potomne znajdujące się wewnątrz elementu z opacity: 0.5 są w 50% przezroczyste — nie można sprawić, aby elementy potomne były bardziej nieprzezroczyste niż ich rodzic.

RGBA tylko dla przezroczystego koloru

Aby uczynić przezroczystym tylko kolor tła, bez wpływania na tekst i elementy potomne, należy użyć rgba() zamiast opacity:

<div class="card">Card with transparent background, opaque text</div>

Porównanie RGBA i opacity

Warto przyjąć następujący model mentalny:

opacity: 0.5 — cały element wraz z elementami potomnymi staje się przezroczysty
rgba(r,g,b,0.5) — przezroczysta jest tylko wartość koloru; elementy potomne pozostają bez zmian

Przezroczystość HSLA

Ta sama zasada dotyczy hsla(). Czwarty argument to kanał alfa (0–1):

<div class="tooltip">Tooltip with HSLA background</div>

Nowoczesna składnia z odstępami

Nowoczesny CSS pozwala używać separatora w postaci ukośnika do określania wartości alfa w rgb() i hsl(), bez wariantu z literą "a":

<div class="modern-rgb">rgb(0 0 0 / 0.5)</div>
  <div class="modern-hsl">hsl(0 0% 0% / 0.5)</div>

opacity: 0 a visibility: hidden i display: none

Wszystkie trzy sposoby ukrywają elementy, ale działają inaczej:

opacity: 0 — element jest niewidoczny, ale nadal zajmuje miejsce i można go kliknąć
visibility: hidden — element jest niewidoczny, zajmuje miejsce, ale nie można go kliknąć
display: none — element jest całkowicie usuwany z układu

Przejście z użyciem opacity

Ponieważ opacity jest kompozycjonowane przez GPU, należy do najtańszych właściwości CSS do animowania. Efekty pojawiania się i zanikania powinny zawsze używać przejść właściwości opacity zamiast background-color.

<div class="modal visible">Fades in via opacity transition</div>

Wzorzec przezroczystego tła

Aby nadać elementowi półprzezroczyste tło i zachować pełną czytelność tekstu, należy użyć rgba() dla background-color:

<div class="glass-card">Glass effect card</div>

Alfa w obramowaniu i box-shadow

Właściwości RGBA można użyć dla border-color i box-shadow, aby tworzyć subtelne, przezroczyste efekty:

<div class="card">Card with alpha border &amp; shadow</div>

Przypomnienie dotyczące dostępności

Tekst o niskiej wartości opacity jest mniej czytelny i może nie spełniać wymagań WCAG dotyczących kontrastu kolorów. Przy używaniu przezroczystości tekstu należy zawsze sprawdzać współczynniki kontrastu. Dla zwykłego tekstu należy zapewnić minimalny współczynnik 4.5:1.

Szybkie sprawdzenie

Element ma ustawienie opacity: 0.3. Co dzieje się z tekstem znajdującym się wewnątrz?

Podsumowanie

opacity sprawia, że cały element wraz z elementami potomnymi staje się przezroczysty. Należy użyć rgba() lub hsla(), aby uzyskać przezroczyste kolory bez wpływania na elementy potomne. Przejścia opacity są przyspieszane przez GPU i wydajne. Przy używaniu przezroczystości tekstu należy zawsze sprawdzać współczynniki kontrastu.

Często zadawane pytania

Czy lekcja „Przezroczystość z opacity i RGBA” jest bezpłatna?

Tak — pełny tekst „Przezroczystość z opacity i RGBA” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przezroczystość z opacity i RGBA”?

Ustawią Państwo przezroczystość elementów za pomocą właściwości opacity i wartości kolorów rgba(). Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Przezroczystość z opacity i RGBA”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy