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