Atribut mix-blend-mode CSS

Definisi dan penggunaan

Atribut mix-blend-mode menentukan cara konten elemen seharusnya dicampur dengan latar belakang induknya.

Lihat juga:

Panduan Referensi CSS:Atribut background-blend-mode CSS

Contoh

Kontainer dengan latar belakang merah, serta gambar yang digabungkan dengan kontainer merah ini (gelap):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

Coba sendiri

Lebih banyak contoh TIY dapat ditemukan di bawah halaman.

Syarat Bahasa CSS

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Nilai properti

Nilai Deskripsi
normal Ini adalah nilai standar. Atur mode campuran ke normal.
multiply Atur mode campuran ke multiply.
screen Atur mode campuran ke screen.
overlay Atur mode campuran ke overlay.
darken Atur mode campuran ke darken.
lighten Atur mode campuran ke lighten.
color-dodge Atur mode campuran ke color-dodge.
color-burn Atur mode campuran ke color-burn.
difference Atur mode campuran ke difference.
exclusion Atur mode campuran ke exclusion.
hue Atur mode campuran ke hue.
saturation Atur mode campuran ke saturation.
color Atur mode campuran ke color.
luminosity Atur mode campuran ke luminosity.

Detil teknis

Nilai standar: normal
Warisan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti animasi.
Syarat Bahasa JavaScript: object.style.mixBlendMode = "darken"

Contoh lebih banyak

Contoh

Tunjukan semua nilai:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Coba sendiri

Contoh

Gunakan mix-blend-mode untuk membuat teks cutout/knockout responsif (teks抠图):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0