Fungsi invert

Fungsi invert membolehkan menyongsangkan warna dalam imej latar belakang. Nilai 0 menandakan imej kekal asal. Nilai 100% atau 1 menyongsangkan warna latar belakang sepenuhnya. Mana-mana nombor yang terletak dalam julat ini menyongsangkan warna sebahagiannya. Nilai negatif tidak boleh ditetapkan. Secara lalai, nilai ialah 0.

Sintaks

pemilih {
	filter: invert(nombor);
}

Contoh

Mari songsangkan warna imej kita kepada nilai 50%:

<div id="elem"></div>

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Sekarang mari songsangkan warna imej kita kepada nilai 100%:

<div id="elem"></div>

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Sekarang mari tetapkan dalam fungsi invert nilai bersamaan 0:

<div id="elem"></div>

#elem {
	filter: invert(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 rona warna untuk latar belakang
fungsi opacity,
yang menetapkan ketelusan latar belakang
fungsi sepia,
yang mengubah latar belakang kepada sepia
property background,
yang merupakan property singkatan untuk latar belakang
property background-image,
yang boleh digunakan untuk menetapkan imej latar belakang kepada blok
property filter,
yang menetapkan gaya untuk latar belakang