Atribut background-blend-mode CSS

Definisi dan penggunaan

background-blend-mode Definisi atribut untuk setiap lapisan latar belakang (warna dan/atau imej) modus campuran.

Lihat juga:

Panduan CSS:Latar belakang CSS

Contoh

Tentukan modus campuran imej latar belakang kepada "lighten" (membuat cerah):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Cuba sendiri

Anda boleh lihat contoh TIY lebih banyak di akhir halaman.

Sintaks CSS

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Nilai atribut

Nilai Deskripsi
normal Lalai. Tetapkan modus campuran kepada biasa.
multiply Tetapkan modus campuran kepada multiply (berganda).
screen Tetapkan modus campuran kepada screen (layar).
overlay Tetapkan modus campuran kepada overlay (melampau).
darken Tetapkan modus campuran kepada overlay (melampau).
lighten Tetapkan modus campuran kepada lighten (membuat cerah).
color-dodge Tetapkan modus campuran menjadi color-dodge (pengurangan warna).
saturation Tetapkan modus campuran menjadi saturation (kepadatan).
color Tetapkan modus campuran menjadi color (warna).
luminosity Tetapkan modus campuran menjadi luminosity (kecerahan).

Perincian teknologi

Nilai lalai: normal
Warisan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut berkaitan dengan animasi.
Versi: CSS3
Bentuk Bahasa JavaScript: object.style.backgroundBlendMode="screen"

Lebih banyak contoh

Contoh

Tetapkan modus campuran sebagai "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Cuba sendiri

Contoh

Tetapkan modus campuran sebagai "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Cuba sendiri

Pendukung pereka

Terdapat nombor di dalam tabel yang menunjukkan versi pereka paling awal yang mendukung sifat ini.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1