Properti background-blend-mode

Properti background-blend-mode mengatur mode overlay gambar latar pada warna latar atau gambar lain. Dalam properti ini juga dapat ditentukan beberapa nilai dipisahkan koma, yang akan diterapkan dalam urutan yang sama. Nilai untuk properti ini mirip dengan mode utama program editor grafis.

Sintaks

cssselector {
  background-blend-mode: modes;
}

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

Nilai

Nilai	Deskripsi
`normal`	Normal. Tidak menggunakan pencampuran warna. 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`	Penyaringan. Dalam mode ini, nilai kebalikan dari warna utama dan warna yang digabungkan dikalikan. Sebagai warna hasil, selalu digunakan warna yang lebih terang.
`overlay`	Hamparan. Dalam mode ini, warna dikalikan atau disaring 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 background-blend-mode:

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

css#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 ubah nilai properti background-blend-mode menjadi perkalian:

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

css#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 atur mode penyaringan untuk gambar kita:

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

css#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

properti background,
yang merupakan properti singkatan untuk latar
properti background-image,
yang dapat digunakan untuk mengatur gambar latar pada blok
properti mix-blend-mode,
yang dapat digunakan untuk meng-overlay warna sumber pada gambar latar
properti backdrop-filter,
yang memungkinkan untuk menerapkan filter