Własność CSS opacity

Własność CSS opacity określa poziom przezroczystości elementu. Odnosi się do całego elementu, włącznie z elementami potomnymi, dzięki czemu całość ma jednakowy poziom przezroczystości względem tła elementu.

Przykład

Poniższa reguła CSS sprawia, że wszystkie elementy img są półprzezroczyste.

img {
  opacity: 50%;
}

Efekt:

Wartości i składnia

Własność opacity przyjmuje jedną wartość liczbową z przedziału od 0.0 do 1.0 lub wartość procentową z przedziału od 0% do 100%.

Wartości spoza tych przedziałów nie są błędne, ale są skracane do najbliższej wartości mieszczącej się w tych przedziałach.

Angielskie słowo opacity oznacza nieprzezroczystość (krycie), więc tak naprawdę za pomocą tej własności ustawiamy poziom nieprzezroczystości elementu. W związku z tym, im wartość jest bliższa zeru, tym mniejszy stopień krycia, a więc tym bardziej przezroczysty jest element.

Wartość 0 oznacza całkowitą przezroczystość, a wartość 1 lub 100% – całkowite krycie. Ustawienie wartości 0 powoduje tylko, że element staje się niewidoczny, ale nadal jest obecny na stronie, reaguje na zdarzenia myszy itd.

Zastosowanie

Własność CSS opacity ma zastosowanie do wszystkich elementów HTML.

Podsumowanie