opacity
Ustawia przezroczystość całego elementu razem z jego zawartością.
- Wartość domyślna
1- Dziedziczona
- Nie
- Animowalna
- tak, jako liczba
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.opacity = "0.5"
Przykład
#.card {
transition: opacity 0.2s;
}
.card:hover {
opacity: 0.8;
}
.card.locked {
opacity: 0.4;
pointer-events: none;
}<div style="display: flex; gap: 8px;">
<div class="box" style="transition: opacity .2s;">Moduł 1</div>
<div class="box" style="opacity: .4;">Moduł 2 🔒</div>
</div>Definicja i zastosowanie
#Właściwość opacity przyjmuje liczbę od 0 (całkowicie przezroczysty) do 1 (w pełni widoczny) albo procent. Dotyczy całego elementu: tła, tekstu, obramowania i wszystkich dzieci.
Jeśli chcesz, żeby przezroczyste było tylko tło, a tekst pozostał wyraźny, użyj koloru z kanałem przezroczystości, na przykład background-color: rgb(0 0 0 / 0.5), zamiast opacity.
Element z opacity: 0 jest niewidoczny, ale nadal zajmuje miejsce i da się go kliknąć. Wartość mniejsza niż 1 tworzy też nowy kontekst stosu, co wpływa na działanie z-index.
Składnia
#opacity: <liczba 0–1> | <procent>;Wartości
#Wartości w praktyce
#1
.demo { opacity: 1; }0.6
.demo { opacity: 0.6; }0.2
.demo { opacity: 0.2; }0
.demo { opacity: 0; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do półprzezroczystego tła pod wyraźnym tekstem użyj koloru z przezroczystością, nie
opacity. - Animacje
opacityitransformsą najtańsze dla przeglądarki. Sprawdzają się w płynnych efektach pojawiania się.
Powiązane hasła
#- visibilityUkrywa element, ale zostawia puste miejsce, które zajmował.
- background-colorUstawia kolor tła elementu.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- filterNakłada efekty graficzne na element: rozmycie, jasność, kontrast, skalę szarości i inne.
- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
Widzisz błąd albo brakuje przykładu? Napisz do nas.