Маска-изображение - CSS-хитрости

A maskв CSS скрывает часть элемента, к которому применяется.

.el ( mask-image: url(star.svg); )

Допустим, у вас есть элемент с фотографическим фоном и черно-белое изображение SVG для использования в качестве маски, например:

Вы можете установить изображение как a background-imageи маску как a mask-imageна одном элементе и получить что-то вроде этого:

Маски имеют много общего с фоном в том, что вы можете изменять их размер, размещать, повторять и т. Д., Как фон. См. Соответствующие свойства ниже. Но вот еще одна интересная особенность масок, которую они разделяют с фоном: они могут быть градиентами.

Вот тот же фоновый рисунок, только с linear-gradientмаской, покрывающей его, которая делает верх прозрачным, затемняет нижний, который совсем не прозрачен:

Это работает, потому что наверху linear-gradientесть transparent. Я бы предположил, что это сработает, если бы оно было whiteтаким же длинным, как mask-typeбыло luminance, но, похоже, это не работает ни в одном браузере для меня.

Говоря о luminanceмасках, мне кажется, что это не работает для изображений-масок в растровом формате, таком как JPG.webp или PNG. Обновление : читатель Майкл Холл записывает демонстрацию, где это может иметь какое-то отношение к использованию свойств длинной руки. Кажется, что Firefox поддерживает эту концепцию, если вы используете только сокращение.

Но альфа-маски, похоже, работают нормально. Как в растровой графике, использующей фактическую альфа-прозрачность. Так:

И чтобы доказать свою точку зрения, цветная анимация, которую вы можете увидеть через маску:

mask-imageСвойство также может быть использован непосредственно внутри элементов SVG. Например, посмотрите на эту эллиптическую маску, которая также имеет размытый фильтр:

Похоже, что вы можете зацепить эту маску SVG и применить ее к другим элементам, mask-image: url(#mask);но я не считаю, что это действительно работает. Он работает только в SVG и имеет неприятный побочный эффект полного стирания изображения при использовании вне SVG.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.