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