Fungsi invert

Fungsi invert memungkinkan untuk membalikkan warna pada gambar latar belakang. Nilai 0 menunjukkan bahwa gambar tetap asli. Nilai 100% atau 1 sepenuhnya membalikkan warna latar belakang. Angka apa pun yang berada dalam rentang ini sebagian membalikkan warna. Nilai negatif tidak dapat ditetapkan. Secara default, nilainya adalah 0.

Sintaks

selector {
	filter: invert(angka);
}

Contoh

Mari kita balikkan warna gambar kita hingga 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 kita balikkan warna gambar kita hingga 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 kita tetapkan dalam fungsi invert nilai yang sama dengan 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 mengatur kecerahan latar belakang
fungsi contrast,
yang mengatur kontras latar belakang
fungsi drop-shadow,
yang mengatur bayangan pada latar belakang
fungsi hue-rotate,
yang mengatur rona warna pada latar belakang
fungsi opacity,
yang mengatur transparansi latar belakang
fungsi sepia,
yang mengubah latar belakang menjadi sepia
properti background,
yang merupakan properti singkatan untuk latar belakang
properti background-image,
yang digunakan untuk menetapkan gambar latar belakang pada blok
properti filter,
yang mengatur gaya untuk latar belakang