Properti background-blend-mode digunakan untuk menentukan mode campuran untuk setiap lapisan latar belakang elemen.

Dengan menggunakan properti background-blend-mode, Kalian dapat memadukan lapisan latar belakang (gambar dan warna) suatu elemen.

Properti mengambil satu atau lebih mode campuran sebagai nilai — nilai ini menentukan rumus yang digunakan untuk memadukan atau mencampur warna gambar latar belakang dengan warna – atau gambar latar belakang lainnya – di belakangnya.

Setiap lapisan latar belakang harus berbaur dengan lapisan latar belakang elemen yang berada di bawahnya dan warna latar belakang elemen. Lapisan latar belakang tidak boleh menyatu dengan konten yang ada di belakang elemen, sebaliknya mereka harus bertindak seolah-olah mereka dibuat menjadi grup yang terisolasi.

Jika elemen memiliki beberapa lapisan latar belakang, dan Kalian menentukan daftar mode campuran (dipisahkan koma) untuk lapisan ini, daftar mode campuran latar belakang harus diterapkan dalam urutan yang sama seperti gambar latar. Ini berarti bahwa mode campuran pertama dalam daftar akan berlaku untuk gambar latar belakang pertama dalam daftar gambar latar belakang — lapisan yang ada di atas. Jika properti tidak memiliki cukup nilai yang dipisah koma untuk mencocokkan jumlah lapisan, Kalian harus menghitung nilai yang digunakan dengan mengulangi daftar nilai sampai ada cukup.

Jika singkatan latar belakang digunakan, properti background-blend-mode untuk elemen itu harus diatur ulang ke nilai awalnya.

Official Syntax

 

Value:

<blend-mode>: Lihat entri <blend-mode> untuk daftar nilai value.

Contoh:

Mode campuran luminositas dapat digunakan untuk membuat efek gambar monokrom “diwarnai”.

Misalnya, contoh berikut memadukan gambar latar elemen dengan warna latar belakangnya, menggunakan nilai luminositas.

 

WhatsApp chat