Mode topeng - Trik CSS | CSS Almanak 2025

The mask-modeproperti CSS menunjukkan apakah CSS layer mask gambar diperlakukan sebagai masker alpha atau masker pencahayaan.

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

Sintaksis

mask-mode: alpha | luminance | match-source

Properti menerima satu nilai kata kunci, atau daftar yang dipisahkan koma dari dua atau ketiga nilai alpha, luminancedan mask-source.

Nilai awal: match-source
Berlaku untuk: semua elemen. Dalam SVG, ini berlaku untuk elemen kontainer tidak termasuk elemen, semua elemen grafis.
Diwariskan: tidak
Nilai yang dihitung: seperti yang ditentukan
Jenis animasi: diskrit

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: menetapkan bahwa nilai alfa (saluran alfa) dari gambar lapisan topeng harus digunakan sebagai nilai topeng.
luminance: menentukan bahwa nilai luminansi gambar topeng harus digunakan sebagai nilai topeng.
match-source: nilai default, yang menyetel mode mask ke alpha jika referensi mask mask-imageproperti adalah elemen CSS seperti URL gambar atau gradien. Namun, jika referensi topeng mask-imageproperti adalah elemen SVG , nilai yang ditentukan oleh properti tipe topeng elemen yang direferensikan harus digunakan.
initial: menerapkan setelan default properti, yaitu match-source.
inherit: mengadopsi nilai mode topeng induk.
unset: menghapus mode topeng saat ini dari elemen.

Menggunakan banyak nilai

Properti ini dapat mengambil daftar nilai yang dipisahkan koma untuk mode topeng dan setiap nilai diterapkan ke gambar lapisan topeng terkait yang ditentukan dalam properti gambar-topeng.

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

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

Masker alfa dan luminansi

Masking di CSS hadir dengan dua metode yang memiliki beberapa perbedaan dalam menghitung nilai mask.

Masker alfa

Gambar terbuat dari piksel, setiap piksel memiliki beberapa data yang berisi nilai warna dan mungkin nilai alfa dengan informasi transparansi. Gambar dengan saluran alfa bisa menjadi topeng alfa , seperti gambar PNG dengan area hitam dan transparan.

Dalam operasi masking sederhana, kami memiliki elemen dan gambar topeng yang ditempatkan di atasnya. Nilai alpha dari setiap piksel pada gambar topeng akan digabungkan dengan piksel yang sesuai di elemen.

Jika nilai alpha adalah nol (yaitu transparan), ia menang dan bagian dari elemen tersebut ditutup (yaitu tersembunyi).
Nilai alfa satu (yaitu sepenuhnya buram) memungkinkan piksel elemen tersebut terlihat.
Nilai antara 0 dan 1 (misalnya 0,5) memungkinkan piksel untuk terlihat tetapi dengan tingkat transparansi tertentu.

Jadi, dalam metode ini, nilai topeng pada titik tertentu hanyalah nilai saluran alfa pada titik gambar topeng dan saluran warna tidak berkontribusi pada nilai topeng.

Contoh di bawah ini adalah topeng alfa yang hanya berisi area hitam (nilai alfa 1) dan transparan (nilai alfa 0) dan Anda dapat melihat hasil yang memiliki beberapa bagian terlihat sepenuhnya dan yang lain sepenuhnya transparan:

Menggunakan PNG dengan saluran alfa sebagai gambar topeng

Namun dalam contoh berikut, kami menggunakan gradien yang memiliki tingkat transparansi berbeda. Hasilnya tidak hanya terlihat atau transparan, tetapi ada beberapa area yang tembus cahaya:

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

Dan inilah hasilnya di browser:

Menggunakan gradien linier sebagai gambar topeng

Masker pencahayaan

Dalam topeng pencahayaan, warna dan nilai alfa penting. Ketika nilai alpha adalah 0 (yaitu sepenuhnya transparan), elemen disembunyikan; ketika ada nilai alpha adalah 1, nilai mask bervariasi tergantung pada color channel dari pixel tersebut. Misalnya, jika warnanya putih, elemen tersebut terlihat; dalam kasus area hitam, elemen disembunyikan.

Sementara menghitung nilai topeng dalam topeng alfa hanya didasarkan pada nilai alfa dari gambar topeng, nilai topeng dari topeng luminance dihitung dari luminansi dan nilai alfa. Browser melakukan ini dengan langkah-langkah berikut:

Hitung nilai luminansi dari nilai saluran warna.
Kalikan nilai luminansi yang dihitung dengan nilai alfa yang sesuai untuk menghasilkan nilai topeng.

/ penjelasan Untuk informasi lebih lanjut tentang perhitungan ini, Anda dapat melihat bagian pemrosesan topeng dalam spesifikasi CSS Masking Module 1 dari Draf Editor September 2019.

Di bawah ini adalah gambar topeng dengan matahari putih di tengah dan area transparan di sekitarnya. Seperti yang Anda lihat, area sementara sepenuhnya terlihat:

Menggunakan gambar PNG dengan saluran alfa dan area putih sebagai gambar topeng

Dan pada contoh berikutnya, gradien warna-warni digunakan sebagai gambar topeng dan Anda dapat melihat efek warna yang berbeda pada nilai topeng dalam mode pencahayaan: