Kurs HTML

Wprowadzenie: Przezroczystość całego elementu

W poprzednich lekcjach nauczyliśmy się definiować przezroczystość dla **kolorów** za pomocą kanału alfa w funkcjach rgba() i hsla(). Pozwala to na tworzenie półprzezroczystych teł, tekstów czy cieni.

Jednak czasami chcemy, aby **cały element**, wraz z całą jego zawartością (tekstem, obrazkami, elementami potomnymi), stał się przezroczysty. Do tego celu służy właściwość opacity.

Właściwość opacity

Właściwość opacity ustawia poziom krycia (nieprzezroczystości) dla całego elementu. Przyjmuje wartość liczbową z zakresu od 0.0 do 1.0:

• 0.0: Element jest całkowicie przezroczysty (niewidoczny).
• 0.5: Element jest w 50% przezroczysty (półprzezroczysty).
• 1.0: Element jest całkowicie nieprzezroczysty (domyślna wartość).

Wartość opacity wpływa na element oraz **wszystkie jego elementy potomne**. Nie można sprawić, aby element potomny był bardziej nieprzezroczysty niż jego rodzic, jeśli rodzic ma ustawioną wartość opacity mniejszą niż 1.0.

<div class="box">
    Ten tekst i obrazek będą półprzezroczyste.
    <img src="obrazek.jpg" alt="Przykład">
</div>

.box {
  background-color: lightblue;
  padding: 20px;
  opacity: 0.6; /* Cały div, włącznie z tłem, tekstem i obrazkiem, będzie w 60% nieprzezroczysty */
}

.box img {
  /* Ustawienie opacity: 1 tutaj nie sprawi, że obrazek będzie w pełni widoczny, 
     ponieważ dziedziczy przezroczystość od rodzica .box */
  opacity: 1; /* Nieefektywne w tym kontekście */
}

Różnica między opacity a kanałem alfa (RGBA/HSLA)

Jest to kluczowa różnica, którą należy zrozumieć:

• Kanał alfa (w rgba()/hsla()): Ustawia przezroczystość **tylko dla koloru**, do którego jest zastosowany (np. background-color, color, border-color). **Nie wpływa** na przezroczystość zawartości elementu (np. tekstu wewnątrz diva z półprzezroczystym tłem).
• Właściwość opacity: Ustawia przezroczystość **całego elementu**, w tym jego tła, obramowania ORAZ całej jego zawartości (tekstu, obrazków, elementów potomnych).

Przykład porównawczy:

<div class="tlo-rgba">Tekst na półprzezroczystym tle (RGBA)</div>
<div class="element-opacity">Tekst na półprzezroczystym tle (Opacity)</div>

div {
  width: 300px;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid black;
}

.tlo-rgba {
  /* Tylko tło jest półprzezroczyste, tekst pozostaje w pełni widoczny */
  background-color: rgba(0, 0, 255, 0.5); /* Półprzezroczysty niebieski */
  color: black; /* Tekst jest czarny i nieprzezroczysty */
}

.element-opacity {
  /* Cały element, włącznie z tekstem, staje się półprzezroczysty */
  background-color: blue; /* Niebieski */
  color: black; /* Czarny */
  opacity: 0.5; 
}

W efekcie, w pierwszym divie tekst będzie bardzo czytelny na półprzezroczystym niebieskim tle. W drugim divie zarówno niebieskie tło, jak i czarny tekst staną się półprzezroczyste, co może utrudnić czytanie.

Zastosowania opacity

• Efekty wizualne: Tworzenie efektów "zanikania" (fade-in/fade-out) w połączeniu z przejściami (transition) lub animacjami (animation) CSS.
• Wskazanie stanu nieaktywnego: Zmniejszenie opacity dla nieaktywnych przycisków lub pól formularza (choć często łączy się to ze zmianą koloru tła/tekstu).
• Nakładki: Czasami używane do tworzenia półprzezroczystych nakładek, chociaż rgba()/hsla() dla background-color jest zazwyczaj lepszym wyborem, jeśli chcemy, aby tekst pod spodem był widoczny.
• Ukrywanie elementów (z zastrzeżeniami): Ustawienie opacity: 0; sprawia, że element jest niewidoczny, ale **nadal zajmuje miejsce** w układzie strony i może reagować na zdarzenia (np. kliknięcia). Różni się to od display: none; (które usuwa element z układu) i visibility: hidden; (które ukrywa element, ale nadal zajmuje miejsce, lecz nie reaguje na zdarzenia).

Wydajność i Dostępność

• Wydajność: Zmiana opacity jest zazwyczaj operacją wydajną pod względem renderowania, często obsługiwaną przez akcelerację sprzętową (GPU), co czyni ją dobrym wyborem dla animacji.
• Dostępność: Należy uważać, aby nadmierne użycie przezroczystości (niskie wartości opacity) nie pogorszyło kontrastu i czytelności treści, szczególnie dla osób z wadami wzroku. Zawsze sprawdzaj kontrast między tekstem a tłem.