Topeng dalam CSS adalah salah satu cara untuk menyembunyikan bahagian elemen dan menunjukkan yang lain. Yang lain adalah clip-path
, tetapi janganlah kita menumpukan perhatian pada hari ini. "Topeng adalah gambar; Klip adalah jalan ”adalah salah satu cara untuk memikirkan perbezaannya, walaupun ia pasti membingungkan.
Dalam video ini, kita akan melihat seberapa serupa mask
dan mask-*
sifatnya sama dengan sifat background
dan background-*
sifatnya. Dan mereka dapat digunakan bersama dengan baik, kerana topeng adalah cara untuk menyembunyikan beberapa bahagian gambar tetapi masih memperlihatkan isi dan latar belakang bahagian lain.
SVG sangat bagus untuk topeng, kerana sifat vektor membolehkan mereka membuat skala dengan baik dan ukuran fail umumnya kecil bagus. Salah satu bit yang mengelirukan pada topeng adalah mask-type
. The alpha
cara nilai bahawa bahagian-bahagian yang telus imej menjadi bahagian-bahagian yang telus topeng (yang kadang-kadang lebih fikiran-lentur daripada apa yang anda berharap). A luminance
nilai cara putih adalah legap dan hitam adalah telus dan kelabu adalah di antaranya. Atau adakah sebaliknya? Dan bagaimana dengan topeng yang sudah mempunyai saluran alfa? Dan adakah kawasan dalam fail SVG tanpa apa-apa di dalamnya dianggap alfa telus? Mungkin? Mari bermain.