Atribut background-blend-mode CSS

Definisi dan penggunaan

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

Lihat pula:

Pelajaran CSS:Latar Belakang CSS

Contoh

Tentukan mode campuran gambar latar untuk "lighten" (menyederhanakan):

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

Coba sendiri

Anda dapat melihat lebih banyak contoh TIY di akhir halaman.

Syarat CSS

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

Nilai atribut

Nilai Deskripsi
normal Default. Atur mode campuran menjadi biasa.
multiply Atur mode campuran menjadi multiply (berganda).
screen Atur mode campuran menjadi screen (layar).
overlay Atur mode campuran menjadi overlay (melapis).
darken Atur mode campuran menjadi overlay (melapis).
lighten Atur mode campuran menjadi lighten (menyederhanakan).
color-dodge Atur mode campuran menjadi color-dodge (pengurangan warna).
saturation Atur mode campuran menjadi saturation (kepadatan).
color Atur mode campuran menjadi color (warna).
luminosity Atur mode campuran menjadi luminosity (kecerahan).

Detil teknis

Nilai standar: normal
Warisan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti berhubungan dengan animasi.
Versi: CSS3
Sintaksis JavaScript: object.style.backgroundBlendMode="screen"

Beberapa contoh lain

Contoh

Tentukan mode campuran "multiply":

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

Coba sendiri

Contoh

Tentukan mode campuran "screen":

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

Coba sendiri

Contoh

Tentukan mode campuran "overlay":

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

Coba sendiri

Contoh

Tentukan mode campuran "darken":

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

Coba sendiri

Contoh

Tentukan mode campuran "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;
}

Coba sendiri

Contoh

Tentukan mode campuran "saturation":

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

Coba sendiri

Contoh

Tentukan mode campuran "color":

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

Coba sendiri

Contoh

Tentukan mode campuran "luminosity":

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

Coba sendiri

Contoh

Tentukan mode campuran "normal":

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

Coba sendiri

Dukungan peramban

Angka di tabel menunjukkan versi pertama peramban yang mendukung properti ini penuh.

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