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