Fungsi brightness

Fungsi brightness memungkinkan Anda mengubah kecerahan gambar latar belakang. Kecerahan latar belakang asli ditentukan oleh nilai 100% atau 1, dengan menguranginya, kecerahan gambar juga berkurang. Sebaliknya, dengan meningkatkan nilai di atas 100% kecerahan meningkat. Nilai negatif tidak diterapkan, dan nilai kosong secara otomatis dianggap sebagai 1.

Sintaksis

selektor {
	filter: brightness(angka);
}

Contoh

Mari kita atur kecerahan gambar kita ke 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 gambar hingga 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 atur kecerahan asli untuk gambar 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 mengatur kontras untuk latar belakang
fungsi drop-shadow,
yang mengatur bayangan untuk latar belakang
fungsi hue-rotate,
yang mengatur rona warna untuk latar belakang
fungsi invert,
yang membalikkan warna latar belakang
fungsi opacity,
yang mengatur transparansi untuk latar belakang
fungsi sepia,
yang mengubah latar belakang menjadi sepia
properti background,
yang merupakan properti singkatan untuk latar belakang
properti background-image,
yang dapat digunakan untuk mengatur gambar latar belakang untuk blok
properti filter,
yang mengatur gaya untuk latar belakang