Mod campuran-campuran - Trik CSS

The mix-blend-modeharta mentakrifkan bagaimana kandungan elemen yang perlu campuran dengan latar belakang. Contohnya, teks a

dapat menyatu dengan latar belakangnya dengan cara yang menarik.

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

Dalam contoh di atas kandungannya telah diubah suai mix-blend-modesehingga warna teks tidak termasuk latar belakangnya. Ini adalah salah satu daripada banyak nilai untuk harta tanah ini.

Terdapat masalah dengan Chrome 58+ di mana mix-blend-modetidak akan memberikan elemen yang ditetapkan secara telus . Ini telah ditandakan sebagai Isu 711955 di Chrome, yang ditugaskan pada saat penulisan ini. Sementara itu, penyelesaian yang mudah adalah menetapkan warna latar belakang putih (atau benar-benar ada) pada elemen badan.

Nilai

initial: tetapan lalai harta yang tidak menetapkan mod campuran.
inherit: elemen akan mewarisi mod campuran dari elemen induknya.
unset: membuang mod campuran semasa dari elemen.
: ini adalah atribut salah satu mod campuran di bawah:
normal: atribut ini tidak berlaku sama sekali.
multiply: elemen didarabkan dengan latar dan menggantikan warna latar. Warna yang dihasilkan sentiasa gelap seperti latar belakang.
screen: mengalikan latar belakang dan kandungan kemudian melengkapkan hasilnya. Ini akan menghasilkan kandungan yang lebih terang daripada background-color.
hamparan: mendarab atau menyaring kandungan bergantung pada warna latar. Ini adalah kebalikan dari mod campuran cahaya keras.
gelap: latar belakang diganti dengan kandungan di mana kandungannya lebih gelap, jika tidak, ia dibiarkan seperti sebelumnya.
lighten: latar diganti dengan kandungan di mana kandungannya lebih ringan.
color-dodge: atribut ini mencerahkan warna latar untuk mencerminkan warna kandungan.
color-burn: ini menggelapkan latar untuk mencerminkan warna semula jadi kandungan.
hard-light: bergantung pada warna kandungan atribut ini akan menyaring atau menggandakannya.
soft-light: bergantung pada warna kandungan ini akan menggelapkan atau meringankannya.
difference: ini mengurangkan warna yang lebih gelap dari dua warna dari warna yang paling terang.
exclusion: serupa dengan differencetetapi dengan kontras yang lebih rendah.
hue: mencipta warna dengan rona kandungan yang digabungkan dengan ketepuan dan kecerahan latar belakang.
saturation: mencipta warna dengan ketepuan kandungan yang digabungkan dengan warna dan cahaya latar.
color: mencipta warna dengan rona dan ketepuan kandungan dan kecerahan latar belakang.
luminosity: mencipta warna dengan kecerahan kandungan dan warna dan ketepuan latar belakang. Ini adalah kebalikan dari coloratribut.

Perlu diperhatikan bahawa menetapkan mod campuran selain normalakan menghasilkan konteks susun baru yang kemudiannya mesti dicampur dengan konteks susun yang mengandungi elemen.

Kesan dari nilai-nilai ini ditunjukkan dalam demo di bawah:

Maklumat lanjut

Asas mod CSS Blend
mod campuran-campuran di MDN
mod campuran-campuran di W3C
Koleksi demo Mod Campuran CSS
Mengenal Mod Campuran CSS

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.