Fungsi sepia

Fungsi sepia membolehkan imej latar belakang dijadikan sepia - imej hitam putih dengan rona perang. Nilai 0 menandakan imej akan kekal asal. Nilai 100% atau 1 sepenuhnya menukar latar belakang kepada sepia. Sebarang nombor yang terletak dalam julat ini menetapkan aplikasi sepia secara linear. Nilai negatif tidak boleh ditetapkan. Secara lalai, nilai adalah 0.

Sintaks

pemilih {
	filter: sepia(nombor);
}

Contoh

Mari jadikan imej kita sepia sepenuhnya:

<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 kurangkan aplikasi sepia kepada 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 tetapkan dalam fungsi sepia nilai bersamaan 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 belakang
fungsi brightness,
yang menetapkan kecerahan latar belakang
fungsi contrast,
yang menetapkan kontras latar belakang
fungsi drop-shadow,
yang menetapkan bayangan untuk latar belakang
fungsi hue-rotate,
yang menetapkan kewarnaan latar belakang
fungsi invert,
yang menyongsangkan warna latar belakang
fungsi opacity,
yang menetapkan ketelusan latar belakang
sifat background,
yang mewakili 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