CSS brightness() fonksiyonu

Tanımı ve kullanımı

CSS'nin brightness() Filtre fonksiyonları, öğelerin aydınlatmasını ayarlamak için kullanılır.

  • 0% görseli tamamen siyah yapar
  • 100%（veya 1）varsayılan değerdir ve orijinal görseli gösterir
  • 100%以上 değerler görseli aydınlatır
  • 100% altındaki değerler görseli karartır

Örnek

Örnek 1

Görseli orijinal görselden daha aydınlık veya karanlık hale getirmek:

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

Kişisel olarak deneyin

Örnek 2

şunu brightness() ve backdrop-filter Özelliklerin bir araya getirilmesi:

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;
}

Kişisel olarak deneyin

CSS grameri

brightness(amount)
Değer Açıklama
amount

İsteğe bağlı. Parlaklık değeri, sayı veya yüzdeliktir.

0% öğeyi tamamen siyah yapar. 100%（veya 1）varsayılan değerdir ve orijinal görseli（söz konusu etki olmadan）gösterir.

100%以上 değeri görseli daha aydınlık yapar.

Teknik ayrıntılar

Sürüm： CSS Filter Effects Module Level 1

Tarayıcı desteği

Tablodeki rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

İlgili sayfa

Kaynakça:CSS filtre özelliği

Kaynakça:CSS blur() fonksiyonu

Kaynakça:CSS contrast() fonksiyonu

Kaynakça:CSS drop-shadow() fonksiyonu

Kaynakça:CSS grayscale() fonksiyonu

Kaynakça:CSS hue-rotate() fonksiyonu

Kaynakça:CSS invert() fonksiyonu

Kaynakça:CSS opacity() fonksiyonu

Kaynakça:CSS saturate() fonksiyonu

Kaynakça:CSS sepia() fonksiyonu