Маскування в CSS - це один із способів приховати частини елемента та показати інші. Інший є clip-path, але не будемо зосереджуватись на цьому сьогодні. «Маски - це образи; Кліпи - це шляхи »- це один із способів думати про різницю, хоча це, безумовно, заплутує.
У цьому відео ми розглянемо, наскільки схожі maskта його mask-*властивості насправді схожі на властивості backgroundта background-*. І їх можна красиво використовувати разом, маска sinces - це спосіб приховати деякі частини зображення, але при цьому розкрити вміст та фон інших частин.
SVG чудово підходить для масок, оскільки векторна природа дозволяє їм добре масштабуватися, а загалом невеликий розмір файлу приємний. Одним із заплутаних бітів навколо масок є mask-type. В alphaозначає значення , що прозорі частини зображень стають прозорими частинами маски (які іноді більш галюциногенний , ніж ви сподіваєтеся). luminanceЗначення означає білий непрозорий і чорний є прозорою і сірим між ними. Або все навпаки? А як щодо масок, які вже мають альфа-канал? І чи вважаються області у файлі SVG, в яких немає нічого, прозорими альфа-версіями? Мабуть? Давайте пограємо.