Fungsi sepia
Fungsi sepia memungkinkan
untuk membuat gambar latar menjadi sepia -
gambar hitam putih dengan corak
cokelat. Nilai 0 menandakan
bahwa gambar akan tetap asli.
Nilai 100% atau 1 sepenuhnya
mengubah latar menjadi sepia. Angka apa pun yang terletak dalam
rentang ini menerapkan sepia secara linear.
Nilai negatif tidak dapat ditetapkan.
Secara default, nilainya adalah 0.
Sintaks
selektor {
filter: sepia(angka);
}
Contoh
Mari kita buat gambar kita menjadi sepia penuh:
<div id="elem"></div>
#elem {
filter: sepia(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Contoh
Sekarang mari kita kurangi penerapan sepia
menjadi 50%:
<div id="elem"></div>
#elem {
filter: sepia(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Contoh
Sekarang mari kita tetapkan dalam
fungsi sepia nilai
yang sama dengan 0:
<div id="elem"></div>
#elem {
filter: sepia(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Lihat juga
-
fungsi
blur,
yang mengaburkan latar -
fungsi
brightness,
yang menetapkan kecerahan untuk latar -
fungsi
contrast,
yang menetapkan kontras untuk latar -
fungsi
drop-shadow,
yang menetapkan bayangan untuk latar -
fungsi
hue-rotate,
yang menetapkan rona warna untuk latar -
fungsi
invert,
yang membalikkan warna latar -
fungsi
opacity,
yang menetapkan transparansi untuk latar -
properti
background,
yang merupakan properti singkatan untuk latar -
properti
background-image,
yang dapat digunakan untuk menetapkan gambar latar untuk blok -
properti
filter,
yang menetapkan gaya untuk latar