Campuran-campuran-mode - Trik CSS

The mix-blend-modeproperti mendefinisikan bagaimana konten elemen harus berbaur dengan latar belakang. Misalnya, teks a

bisa menyatu dengan latar belakangnya dengan cara yang menarik.

.blend ( mix-blend-mode: exclusion; )

Dalam contoh di atas, konten telah dimodifikasi oleh mix-blend-modesehingga warna teks dikecualikan dari latar belakangnya. Ini hanyalah salah satu dari banyak nilai untuk properti ini.

Ada masalah dengan Chrome 58+ yang mix-blend-modetidak akan merender pada elemen yang disetel secara transparan . Itu telah diberi tiket sebagai Masalah 711955 di Chrome, yang ditetapkan pada saat penulisan ini. Sementara itu, perbaikan sederhana adalah menetapkan warna latar belakang putih (atau sebenarnya, apa saja) ke elemen tubuh.

Nilai

initial: setelan default dari properti yang tidak menyetel mode campuran.
inherit: elemen akan mewarisi mode campuran dari elemen induknya.
unset: menghapus mode campuran saat ini dari suatu elemen.
: ini adalah atribut dari salah satu mode campuran di bawah ini:
normal: atribut ini tidak menerapkan pencampuran apa pun.
multiply: elemen dikalikan dengan latar belakang dan menggantikan warna latar belakang. Warna yang dihasilkan selalu gelap seperti latar belakang.
screen: mengalikan latar belakang dan konten kemudian melengkapi hasilnya. Ini akan menghasilkan konten yang lebih cerah dari background-color.
overlay: menggandakan atau menyaring konten tergantung pada warna latar belakang. Ini adalah kebalikan dari mode campuran cahaya-keras.
menggelapkan: latar belakang diganti dengan konten yang kontennya lebih gelap, jika tidak, akan dibiarkan apa adanya.
lighten: latar belakang diganti dengan konten yang kontennya lebih ringan.
color-dodge: atribut ini mencerahkan warna latar belakang untuk mencerminkan warna konten.
color-burn: ini menggelapkan latar belakang untuk mencerminkan warna alami konten.
hard-light: tergantung pada warna konten, atribut ini akan menyaring atau memperbanyaknya.
soft-light: tergantung pada warna konten ini akan menggelapkan atau mencerahkannya.
difference: ini mengurangi warna yang lebih gelap dari dua warna dari warna paling terang.
exclusion: mirip dengan differencetetapi dengan kontras yang lebih rendah.
hue: menciptakan warna dengan rona konten yang dikombinasikan dengan saturasi dan kilau latar belakang.
saturation: menciptakan warna dengan saturasi konten yang dikombinasikan dengan corak dan kilau latar belakang.
color: menciptakan warna dengan corak dan saturasi konten serta kilau latar belakang.
luminosity: menciptakan warna dengan luminositas konten dan rona serta saturasi latar belakang. Ini adalah kebalikan dari coloratribut.

Perlu dicatat bahwa menyetel mode campuran selain normalakan menghasilkan konteks penumpukan baru yang kemudian harus dicampur dengan konteks penumpukan yang berisi elemen.

Efek dari nilai-nilai ini ditunjukkan pada demo di bawah ini:

Informasi lebih lanjut

Dasar-dasar mode CSS Blend
mix-blend-mode di MDN
mix-blend-mode di W3C
Kumpulan demo CSS Blend Mode
Mengenal Mode Campuran CSS

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.