Fungsi brightness

Fungsi brightness membolehkan anda mengubah kecerahan imej latar belakang. Kecerahan asal latar belakang ditentukan oleh nilai 100% atau 1, dengan mengurangkannya, kecerahan imej juga akan berkurang. Oleh itu, apabila nilai ditingkatkan melebihi 100% kecerahan akan meningkat. Nilai negatif tidak digunakan, dan nilai kosong secara automatik dianggap sebagai 1.

Sintaks

pemilih {
	filter: brightness(nombor);
}

Contoh

Mari kita tetapkan kecerahan untuk imej kita kepada 20%:

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

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

Contoh

Dan sekarang mari kita tingkatkan kecerahan imej kepada 120%:

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

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

Contoh

Mari kita tetapkan kecerahan asal untuk imej kita:

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

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

Lihat juga

fungsi blur,
yang mengaburkan latar belakang
fungsi contrast,
yang menetapkan kontras untuk latar belakang
fungsi drop-shadow,
yang menetapkan bayangan untuk latar belakang
fungsi hue-rotate,
yang menetapkan kewarnaan untuk latar belakang
fungsi invert,
yang menyongsangkan warna latar belakang
fungsi opacity,
yang menetapkan ketelusan untuk latar belakang
fungsi sepia,
yang menukar latar belakang kepada sepia
sifat background,
yang merupakan sifat singkatan untuk latar belakang
sifat background-image,
yang boleh digunakan untuk menetapkan imej latar belakang kepada blok
sifat filter,
yang menetapkan gaya untuk latar belakang