brightness Fonksiyonu

brightness fonksiyonu, arka plan görüntüsünün parlaklığını değiştirmenizi sağlar. Arka planın orijinal parlaklığı 100% veya 1 değeri ile belirlenir, bu değerler azaltıldığında görüntünün parlaklığı da azalır. Buna karşılık, değer 100%'nin üzerine çıkarıldığında parlaklık artar. Negatif değerler uygulanmaz ve boş bir değer otomatik olarak 1 olarak algılanır.

Sözdizimi

seçici {
	filter: brightness(sayı);
}

Örnek

Şimdi görselimizin parlaklığını 20% olarak ayarlayalım:

<div id="elem"></div>

#elem {
	filter: brightness(20%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Şimdi de görselimizin parlaklığını 120%'ye çıkaralım:

<div id="elem"></div>

#elem {
	filter: brightness(120%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Şimdi görselimiz için orijinal parlaklığı ayarlayalım:

<div id="elem"></div>

#elem {
	filter: brightness(1);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ayrıca Bakınız

blur fonksiyonu,
arka planı bulanıklaştırır
contrast fonksiyonu,
arka plana kontrastlık ayarı verir
drop-shadow fonksiyonu,
arka plana gölge verir
hue-rotate fonksiyonu,
arka plana renk tonu döndürme ayarı verir
invert fonksiyonu,
arka plan renklerini tersine çevirir
opacity fonksiyonu,
arka plana saydamlık ayarı verir
sepia fonksiyonu,
arka planı sepya rengine dönüştürür
background özelliği,
arka plan için kısaltma özelliğidir
background-image özelliği,
bir bloğa arka plan resmi atamak için kullanılır
filter özelliği,
arka plan için stil tanımlar