Dokumentacja CSS z przykładami: Opacity

Q: Co robi opacity w CSS?

Ustala, jak bardzo przezroczysty jest element, od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty). Działa na cały element, łącznie z tekstem, obramowaniem, obrazkami i każdym dzieckiem, jako jedną spłaszczoną warstwę.

Q: Jak sprawić, żeby przezroczyste było tylko tło, a nie tekst?

Nie ruszaj opacity, tylko nadaj tłu kolor z kanałem alfa: background-color: rgb(37 99 235 / 0.5); albo rgba(37, 99, 235, 0.5). Tekst i dzieci pozostają całkowicie nieprzezroczyste.

Q: Czy dziecko może być mniej przezroczyste niż rodzic?

Nie. Opacity rodzica działa na całą grupę, więc opacity: 1 na dziecku jej nie cofnie. Dziecko rodzica z 0.5 jest rysowane co najwyżej z połową nieprzezroczystości. Zamiast tego przenieś przezroczystość do koloru tła rodzica.

Q: Czym różnią się opacity: 0, visibility: hidden i display: none?

opacity: 0 ukrywa element, ale nadal zajmuje on miejsce, można go kliknąć i czytniki ekranu go odczytują. visibility: hidden zachowuje miejsce, ale elementu nie da się kliknąć ani nie jest odczytywany. display: none całkowicie usuwa go z układu.

Q: Czy opacity może być w procentach?

Tak. opacity: 50% to we wszystkich aktualnych przeglądarkach to samo co opacity: 0.5. Wartości poniżej 0 lub powyżej 1 są przycinane do tego zakresu.

Co robi opacity

opacity ustala, jak bardzo przezroczysty jest element: 1 to pełny (domyślnie), 0 to niewidoczny, a wszystko pomiędzy przepuszcza tło. Pudełka poniżej stoją na pasiastym tle, żeby było to widać:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

Ostatnie pudełko nadal tam jest: zajmuje swoje 90px w wierszu, tylko nic nie rysuje. Zwróć uwagę, że białe liczby blakną razem ze swoimi pudełkami. opacity działa na element i wszystko w jego wnętrzu.

Przezroczyste tło, pełny tekst

Ponieważ opacity wygasza też dzieci, to złe narzędzie do "przezroczystego tła pod czytelnym tekstem". Zamiast tego użyj koloru tła z kanałem alfa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Oba białe panele przepuszczają paski w tym samym stopniu. W pierwszym tekst blaknie razem z panelem. W drugim przezroczysty jest tylko kolor tła (rgb(255 255 255 / 0.6), to samo co rgba(255, 255, 255, 0.6)), więc tekst pozostaje pełny i łatwy do czytania. Kolory z kanałem alfa omawia strona o kolorach.

Dziecko nie ucieknie przed opacity rodzica: opacity: 1 na dziecku nic nie robi, bo rodzic jest rysowany jako jedna wygaszona warstwa, w której dziecko już jest.

Wartości

Wartość	Wynik
`1` lub `100%`	całkowicie nieprzezroczysty (domyślnie)
`0.5` lub `50%`	w połowie przezroczysty
`0` lub `0%`	całkowicie przezroczysty, nadal w układzie i klikalny
`1.5`, `-1`	przycięte do `1` i `0`

Opacity dziedziczy się wizualnie, ale nie jako właściwość: obliczone opacity dziecka pozostaje 1, choć jest ono rysowane wewnątrz wygaszonego rodzica.

opacity: 0 kontra visibility: hidden kontra display: none

Wszystkie trzy sprawiają, że element znika, ale różnią się we wszystkim innym:

	`opacity: 0`	`visibility: hidden`	`display: none`
Zajmuje miejsce	tak	tak	nie
Odbiera kliknięcia i fokus	tak	nie	nie
Odczytywany przez czytniki ekranu	tak	nie	nie
Można animować przejściem	tak, płynnie	przełącza się na jednym końcu, bez wygaszania	nie

Różnica, która najczęściej zaskakuje, jest w drugim wierszu. Przycisk z opacity: 0 nadal można kliknąć i przejść do niego Tabem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

Odczyt pyta przeglądarkę, który element jest pod punktem wewnątrz każdego ukrytego przycisku. Przycisk z opacity: 0 odpowiada "clickable", a ten z visibility: hidden nie. Przycisk Visible zaczyna się po dwóch pustych miejscach po 150px, bo tylko przycisk z display: none oddał swoje miejsce. Żeby coś wygasić, a potem usunąć, animuj opacity i na końcu ustaw visibility: hidden.

Wygaszanie po najechaniu

opacity to jedna z najtańszych właściwości do animowania, więc to standardowy sposób na płynne pokazywanie i ukrywanie elementów. Podpis, który pojawia się nad obrazkiem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within pokazuje podpis także osobom korzystającym z klawiatury. Pamiętaj o tabeli powyżej: gdy podpis jest niewidoczny, czytniki ekranu nadal go odczytują, a przy podpisie właśnie o to chodzi.

Dostępność: wygaszony tekst traci kontrast

Obniżenie opacity obniża kontrast. Szary tekst na białym tle z opacity: 0.5 może spaść znacznie poniżej współczynnika 4.5:1, którego potrzebuje tekst główny. Dla tekstu drugorzędnego wybierz kolor, który spełnia wymagania kontrastu, zamiast wygaszać ciemny. Przy wyłączonych kontrolkach obniżone opacity to częsty sygnał, ale łącz je z atrybutem disabled, żeby kontrolka była też nieosiągalna z klawiatury i ogłaszana jako wyłączona.

Efekt uboczny: kontekst nakładania

Każde opacity poniżej 1 tworzy nowy kontekst nakładania, tak jak transform. Dzieci z wysokim z-index nakładają się wtedy tylko wewnątrz wygaszonego elementu i nie mogą wznieść się ponad elementy na zewnątrz. Jeśli rozwijane menu wewnątrz wygaszonego panelu chowa się pod innym elementem, to właśnie jest powód (strona o z-index wyjaśnia nakładanie).

Częste błędy

Wygaszanie karty, żeby jej tło było przezroczyste. Tekst też blaknie. Użyj rgb(... / 0.5) na tle.
Próba przywrócenia pełnej nieprzezroczystości dziecku. Opacity rodzica ogranicza każde dziecko.
Ukrywanie samym opacity: 0. Element nadal odbiera kliknięcia i fokus. Dodaj visibility: hidden albo użyj display: none (pointer-events: none blokuje kliknięcia, ale nie fokus z klawiatury).
Pisanie opacity: 50. Opacity ma zakres od 0 do 1; 50 zostaje przycięte do 1. Napisz 0.5 albo 50%.
Tekst o niskim kontraście przez opacity. Sprawdzaj kontrast wyniku, a nie oryginalnego koloru.

Najczęściej zadawane pytania

Co robi opacity w CSS?

Ustala, jak bardzo przezroczysty jest element, od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty). Działa na cały element, łącznie z tekstem, obramowaniem, obrazkami i każdym dzieckiem, jako jedną spłaszczoną warstwę.

Jak sprawić, żeby przezroczyste było tylko tło, a nie tekst?

Nie ruszaj opacity, tylko nadaj tłu kolor z kanałem alfa: background-color: rgb(37 99 235 / 0.5); albo rgba(37, 99, 235, 0.5). Tekst i dzieci pozostają całkowicie nieprzezroczyste.

Czy dziecko może być mniej przezroczyste niż rodzic?

Nie. Opacity rodzica działa na całą grupę, więc opacity: 1 na dziecku jej nie cofnie. Dziecko rodzica z 0.5 jest rysowane co najwyżej z połową nieprzezroczystości. Zamiast tego przenieś przezroczystość do koloru tła rodzica.

Czym różnią się opacity: 0, visibility: hidden i display: none?

opacity: 0 ukrywa element, ale nadal zajmuje on miejsce, można go kliknąć i czytniki ekranu go odczytują. visibility: hidden zachowuje miejsce, ale elementu nie da się kliknąć ani nie jest odczytywany. display: none całkowicie usuwa go z układu.

Czy opacity może być w procentach?

Tak. opacity: 50% to we wszystkich aktualnych przeglądarkach to samo co opacity: 0.5. Wartości poniżej 0 lub powyżej 1 są przycinane do tego zakresu.

Powiązane zagadnienia