Ciri background-blend-mode

Ciri background-blend-mode menetapkan mod percampuran untuk imej latar belakang pada warna latar belakang atau imej lain. Dalam ciri ini, anda juga boleh menentukan beberapa nilai dipisahkan dengan koma, yang akan diterapkan dalam susunan yang sama. Nilai untuk ciri adalah serupa dengan mod utama perisian pengedit grafik.

Sintaks

pemilih {
	background-blend-mode: mod;
}

Jadual berikut menunjukkan nilai utama untuk ciri background-blend-mode:

Nilai

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

Contoh

Mari lihat bagaimana rupa imej dengan nilai lalai ciri background-blend-mode:

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

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Sekarang mari kita tukar nilai ciri background-blend-mode kepada pendaraban:

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

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari kita tetapkan mod pencerahan untuk imej kami:

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

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lihat juga

ciri background,
yang merupakan ciri singkatan untuk latar belakang
ciri background-image,
yang membolehkan anda menetapkan imej latar belakang kepada blok
ciri mix-blend-mode,
yang membolehkan anda menindih warna sumber pada imej latar belakang
ciri backdrop-filter,
yang membolehkan anda menggunakan penapis