Mod topeng - Trik CSS | CSS Almanac 2025

The mask-modeharta CSS menunjukkan sama ada CSS imej lapisan topeng dianggap sebagai topeng alfa atau topeng 'luminance'.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Sintaks

mask-mode: alpha | luminance | match-source

Properti ini menerima satu nilai kata kunci, atau senarai dua atau ketiga-tiga alpha, luminancedan mask-sourcenilai yang dipisahkan koma .

Nilai awal: match-source
Berlaku untuk: semua elemen. Dalam SVG, ini berlaku untuk elemen kontena tidak termasuk elemen, semua elemen grafik.
Diwarisi: tidak
Nilai dikira: seperti yang dinyatakan
Jenis animasi: diskret

Nilai

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: menentukan bahawa nilai alpha (saluran alfa) gambar lapisan topeng harus digunakan sebagai nilai topeng.
luminance: menentukan bahawa nilai pencahayaan gambar topeng harus digunakan sebagai nilai topeng.
match-source: nilai lalai, yang menetapkan mod topeng ke alpha jika rujukan topeng mask-imageharta itu adalah elemen CSS seperti URL gambar atau kecerunan. Walau bagaimanapun, jika rujukan topeng mask-imageharta itu adalah elemen SVG , nilai yang ditentukan oleh sifat jenis topeng elemen yang dirujuk mesti digunakan.
initial: menggunakan tetapan lalai harta tanah, iaitu match-source.
inherit: mengamalkan nilai mod topeng ibu bapa.
unset: mengeluarkan mod topeng semasa dari elemen.

Menggunakan pelbagai nilai

Properti ini dapat mengambil senarai nilai yang dipisahkan koma untuk mod topeng dan setiap nilai diterapkan pada gambar lapisan topeng yang sesuai yang ditentukan dalam sifat gambar topeng.

Dalam contoh berikut, nilai pertama menentukan mod topeng yang sesuai dengan gambar pertama, nilai kedua untuk gambar kedua, dan sebagainya.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Topeng alfa dan pencahayaan

Masking dalam CSS dilengkapi dengan dua kaedah yang mempunyai beberapa perbezaan dalam mengira nilai mask.

Topeng Alpha

Gambar dibuat dari piksel, setiap piksel mempunyai beberapa data yang berisi nilai warna dan mungkin nilai alfa dengan maklumat ketelusan. Gambar dengan saluran alpha boleh menjadi topeng alpha , seperti gambar PNG dengan kawasan hitam dan telus.

Dalam operasi penyamaran sederhana, kita mempunyai elemen dan gambar topeng yang diletakkan di atasnya. Nilai alfa setiap piksel dalam gambar topeng akan digabungkan dengan piksel yang sesuai dalam elemen.

Sekiranya nilai alpha adalah sifar (iaitu telus), ia akan menang dan bahagian elemen itu disamarkan (iaitu tersembunyi).
Nilai alpha satu (iaitu legap sepenuhnya) membolehkan piksel elemen itu kelihatan.
Nilai antara 0 dan 1 (misalnya 0.5) membolehkan piksel kelihatan tetapi dengan tahap ketelusan tertentu.

Jadi, dalam kaedah ini, nilai topeng pada titik tertentu hanyalah nilai saluran alpha pada titik imej topeng dan saluran warna tidak menyumbang kepada nilai topeng.

Contoh di bawah adalah topeng alpha yang hanya mengandungi warna hitam (nilai alpha 1) dan kawasan telus (nilai alpha 0) dan anda dapat melihat hasilnya yang mempunyai beberapa bahagian yang dapat dilihat sepenuhnya dan yang lain sepenuhnya telus:

Menggunakan PNG dengan saluran alpha sebagai gambar topeng

Tetapi dalam contoh berikut, kami menggunakan kecerunan yang mempunyai tahap ketelusan yang berbeza. Hasilnya tidak hanya kelihatan atau telus, tetapi ada beberapa kawasan lut:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Dan inilah hasilnya dalam penyemak imbas:

Menggunakan kecerunan linear sebagai imej topeng

Topeng bercahaya

Dalam topeng cahaya, warna dan nilai alpha penting. Apabila nilai alpha 0 (iaitu telus sepenuhnya), elemen itu disembunyikan; apabila terdapat nilai alpha 1, nilai topeng berbeza bergantung pada saluran warna piksel itu. Contohnya, apabila warnanya putih, elemennya dapat dilihat; dalam kes kawasan hitam, elemen itu tersembunyi.

Semasa mengira nilai topeng dalam topeng alfa hanya berdasarkan pada nilai alpha dari gambar topeng, nilai topeng topeng luminans dihitung dari nilai pencahayaan dan alpha. Penyemak imbas melakukan ini dengan langkah berikut:

Hitung nilai pencahayaan dari nilai saluran warna.
Darabkan nilai pencahayaan yang dikira dengan nilai alpha yang sesuai untuk menghasilkan nilai topeng.

/ penjelasan Untuk maklumat lebih lanjut mengenai pengiraan ini, anda boleh melihat bahagian pemprosesan topeng dalam spesifikasi CSS Masking Module 1 dari Draf Editor September 2019.

Bellow adalah gambar topeng dengan sinar matahari putih di tengah dan kawasan lutsinar di sekitarnya. Seperti yang anda lihat, kawasan sementara dapat dilihat sepenuhnya:

Menggunakan gambar PNG dengan saluran alpha dan kawasan putih sebagai imej topeng

Dan dalam contoh seterusnya, kecerunan berwarna digunakan sebagai imej topeng dan anda dapat melihat kesan warna yang berbeza pada nilai topeng dalam mod pencahayaan: