Маскирането в CSS е един от начините да скриете части от елемента и да покажете другите. Друго е clip-path, но нека не се фокусираме върху това днес. „Маските са изображения; Клиповете са пътеки “е един от начините да се мисли за разликата, въпреки че със сигурност става объркващо.
В това видео, ние ще разгледаме как подобни maskи неговите mask-*свойства са много подобен на backgroundи background-*свойства. И те могат да се използват заедно добре, sinces маска е начин да се скрият някои части на изображението, но все пак разкриват съдържанието и фона на останалите части.
SVG е чудесен за маски, тъй като векторната природа им позволява да се мащабират добре и като цяло малкият размер на файла е приятен. Един от объркващите битове около маските е mask-type. На alphaозначава стойността, че прозрачните части на снимката стават прозрачни части на маската (което понякога е по-оказващ влияние, отколкото се надявате). А luminanceстойност означава бяло е непрозрачна и черно е прозрачен и сиво е между тях. Или е обратното? А какво ще кажете за маски, които вече имат алфа канал? И дали областите във SVG файл без нищо в тях се считат за алфа прозрачни? Вероятно? Хайде да играем.