Ciri mix-blend-mode

Ciri mix-blend-mode menetapkan mod campuran warna asas ke atas warna latar belakang atau imej latar belakang. Nilai untuk ciri adalah serupa dengan mod utama perisian penyunting grafik.

Sintaks

pemilih {
	mix-blend-mode: nilai;
}

Jadual berikut memaparkan nilai utama untuk ciri mix-blend-mode:

Nilai

Nilai	Keterangan
`normal`	Biasa. Tiada percampuran warna digunakan. Mod lalai.
`multiply`	Pendaraban. Dalam mod ini, nilai warna asas didarabkan dengan nilai warna yang bertindih. Warna hasil sentiasa merupakan warna yang lebih gelap.
`screen`	Pencerahan. Dalam mod ini, nilai songsang warna asas dan warna yang bertindih didarabkan. Warna hasil sentiasa merupakan warna yang lebih terang.
`overlay`	Overlay. Dalam mod ini, warna didarabkan atau diterangkan bergantung pada warna asas. Corak atau warna menindih piksel sedia ada, meninggalkan kawasan terang dan gelap warna asas tidak berubah.

Contoh

Mari kita lihat bagaimana rupa imej dengan nilai lalai ciri 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 mod campuran kepada pendaraban:

<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 tetapkan nilai overlay untuk ciri 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

ciri background,
yang merupakan ciri singkatan untuk latar belakang
ciri background-image,
yang membolehkan anda menetapkan imej latar belakang untuk blok
ciri background-blend-mode,
yang membolehkan anda menindih imej latar belakang ke atas warna latar belakang