Properti mix-blend-mode

Properti mix-blend-mode mengatur mode pencampuran warna sumber ke warna latar belakang atau gambar latar belakang. Nilai untuk properti ini mirip dengan mode utama pada editor grafis.

Sintaks

selector {
	mix-blend-mode: nilai;
}

Tabel berikut menampilkan nilai-nilai utama untuk properti mix-blend-mode:

Nilai

Nilai	Keterangan
`normal`	Normal. Pencampuran warna tidak digunakan. Mode default.
`multiply`	Perkalian. Dalam mode ini, nilai warna utama dikalikan dengan nilai warna yang digabungkan. Warna hasil selalu merupakan warna yang lebih gelap.
`screen`	Screen (Layar). Dalam mode ini, nilai kebalikan dari warna utama dan warna yang digabungkan dikalikan. Sebagai warna hasil, selalu digunakan warna yang lebih terang.
`overlay`	Overlay (Tumpang Tindih). Dalam mode ini, warna dikalikan atau diterangkan tergantung pada warna utama. Pola atau warna menutupi piksel yang sudah ada, membiarkan area terang dan gelap dari warna utama tetap tidak berubah.

Contoh

Mari kita lihat bagaimana gambar akan terlihat dengan nilai default dari properti mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Contoh

Sekarang mari kita ubah mode campuran menjadi perkalian:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Contoh

Mari kita beri nilai overlay (tumpang tindih) pada properti mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Lihat Juga

properti background,
yang merupakan properti singkatan untuk latar belakang
properti background-image,
yang dapat digunakan untuk memberikan gambar latar belakang pada sebuah blok
properti background-blend-mode,
yang dapat digunakan untuk menumpangkan gambar latar belakang pada warna latar belakang