Funkcja CSS brightness()

Definicja i użycie

CSS brightness() Funkcje filtrów służą do regulacji jasności elementów.

  • 0% uczyni obraz całkowicie czarnym
  • 100% (lub 1) to wartość domyślna, oznaczająca oryginalny obraz
  • Wartości powyżej 100% uczynią obraz jaśniejszym
  • Wartości poniżej 100% uczynią obraz ciemniejszym

Przykład

Przykład 1

Spraw, aby obraz był jaśniejszy lub ciemniejszy niż oryginalny obraz:

#img1 {
  filter: brightness(150%);
}
#img2 {
  filter: brightness(50%);
}

Spróbuj sam

Przykład 2

z brightness() z backdrop-filter Użycie kombinacji atrybutów:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: brightness(150%);
  backdrop-filter: brightness(150%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Spróbuj sam

Gramatyka CSS

brightness(amount)
Wartość Opis
amount

Opcjonalne. Określa wartość jasności, która może być liczbą lub procentem.

0% uczyni element całkowicie czarnym. 100% (lub 1) to wartość domyślna, oznaczająca oryginalny obraz (bez efektów).

Wartości powyżej 100% uczynią obraz jaśniejszym.

Szczegóły techniczne

Wersja: Moduł efektów filtrów CSS poziom 1

Obsługa przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Strony związane

Odniesienia:Atrybut filter w CSS

Odniesienia:Funkcja blur() w CSS

Odniesienia:Funkcja CSS contrast()

Odniesienia:Funkcja CSS drop-shadow()

Odniesienia:Funkcja CSS grayscale()

Odniesienia:Funkcja CSS hue-rotate()

Odniesienia:Funkcja CSS invert()

Odniesienia:Funkcja CSS opacity()

Odniesienia:Funkcja saturate() w CSS

Odniesienia:Funkcja sepia() w CSS