Yang background-blend-mode
mentakrifkan harta bagaimana ini elemen background-image
perlu campuran dengan mereka background-color
:
.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )
Lihat mod pena latar belakang Pen oleh CSS-Tricks (@ css-tricks) di CodePen.
Dalam demo di atas, lalai background-image
di sebelah kiri tidak mempunyai set mod campuran dan sehingga gambar bertindih background-color
. Namun di sebelah kanan, mod campuran telah diubah background-image
dengan warna merah background-color
di bawahnya. Tetapi perhatikan bahawa warna teks tidak dipengaruhi oleh harta tambahan ini.
Nilai
initial
: nilai lalai tanpa pengadunan.inherit
: mewarisi mod campuran elemen induk.: nilai yang akan mengubah gambar latar bergantung pada warna latar belakangnya.
Yang nilai boleh ditetapkan sebagai mana-mana daripada yang berikut (dalam demo di bawah
background-color
adalah merah):

















luminosity
: kecerahan warna atas dipelihara sambil menggunakan ketepuan dan rona warna latar.
Demo
Berikut adalah contoh kerja bagaimana nilai-nilai tersebut ditafsirkan bergantung pada background-color
:
Lihat mod gabungan Latar Belakang Pen oleh CSS-Tricks (@ css-tricks) di CodePen.
Merantai pelbagai mod campuran
Setiap lapisan latar belakang hanya dapat memiliki mod campuran tunggal, namun jika kita menggunakan beberapa kecerunan linear misalnya, masing-masing dapat mempunyai mod campuran mereka sendiri yang menjadikan paparan menarik:
Lihat Pen Gradien dan mod latar-campuran oleh CSS-Tricks (@ css-tricks) di CodePen.
Ini dicapai dengan menyenaraikan nilai-nilai ini mengikut urutan lapisan latar belakang yang ingin anda kesan:
.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )
Gradien linier pertama mempunyai screen
mod campuran, diikuti oleh kecerunan linier kedua yang mempunyai difference
dan gambar latar pertama yang lighten
berlaku padanya.
Maklumat lanjut
- Asas Mod Campuran CSS
- latar-campuran-mod pada MDN
- Menyusun dan mengadun pada W3C
- background-blend-mode di webplatform.org
- Koleksi demo mod campuran CSS
- Mengenal Mod Campuran CSS
Sokongan Penyemak Imbas
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
35+ | 7.1 | 35+ | 27+ | Tidak | 37+ | 8.1+ |