Masking di CSS adalah salah satu cara untuk menyembunyikan bagian dari elemen dan menampilkan yang lain. Lain adalah clip-path, tapi jangan fokus pada hari ini. “Topeng adalah gambar; Clips are paths ”adalah salah satu cara untuk memikirkan perbedaannya, meskipun hal itu pasti membingungkan.
Dalam video ini, kita akan melihat seberapa mirip maskdan mask-*propertinya sangat mirip dengan properti backgrounddan background-*. Dan mereka bisa digunakan bersama dengan baik, sinces mask adalah cara untuk menyembunyikan beberapa bagian dari sebuah gambar tapi tetap menampilkan konten dan background dari bagian lainnya.
SVG sangat bagus untuk mask, karena sifat vektor memungkinkan mereka untuk menskalakan dengan baik dan ukuran file yang umumnya kecil itu bagus. Salah satu bit yang membingungkan di sekitar topeng adalah mask-type. The alphanilai berarti bahwa bagian-bagian transparan dari gambar menjadi bagian-bagian transparan dari topeng (yang kadang-kadang lebih pikiran-lipatan dari yang Anda harapkan). Sebuah luminancenilai berarti putih buram dan hitam transparan dan abu-abu di antara. Atau sebaliknya? Dan bagaimana dengan topeng yang sudah memiliki saluran alfa? Dan apakah area dalam file SVG tanpa apa pun di dalamnya dianggap transparan alfa? Mungkin? Ayo bermain.