CSS-маскирование дает вам возможность использовать изображение в качестве слоя маски. Это означает, что вы можете использовать изображение, SVG или градиент в качестве маски для создания интересных эффектов без редактора изображений.
Когда вы обрезаете элемент с помощью свойства clip-path обрезанная область становится невидимой. Если вместо этого вы хотите сделать часть изображения непрозрачной или применить к ней какой-то другой эффект, то вам нужно использовать маскирование. В этом посте объясняется, как использовать свойство mask-image в CSS, которое позволяет указать изображение, которое будет использоваться в качестве слоя маски. Это дает вам три варианта. Вы можете использовать файл изображения в качестве маски, SVG или градиента.
Совместимость с браузером
Несмотря на то, что маскирование CSS является базовой версией, большинство функций mask-image доступны в более ранних версиях браузера с использованием префикса -webkit-mask-image . В следующих примерах показано, как использовать оба свойства вместе для лучшей поддержки браузера.
Маска с изображением
Свойство mask-image работает аналогично свойству background-image . Используйте значение url() для передачи изображения. Изображение маски должно иметь прозрачную или полупрозрачную область.
Полностью прозрачная область сделает часть изображения под этой областью невидимой. Однако использование полупрозрачной области позволит продемонстрировать часть исходного изображения. Вы можете увидеть разницу в следующем CodePen.
- Первое изображение — это исходное изображение воздушных шаров без маски.
- На втором изображении применена маска с белой звездой на полностью прозрачном фоне.
- Третье изображение имеет белую звезду на фоне с градиентной прозрачностью.
В этом примере также используется свойство mask-size со значением cover . Это свойство работает так же, как и background-size . Используйте ключевые слова cover и contain или задайте размер фона, используя любую допустимую единицу длины или процент.
Вы также можете повторить маску так же, как повторяете фоновое изображение, чтобы использовать маленькое изображение в качестве повторяющегося узора.
Маска с SVG
Вместо использования файла изображения в качестве маски вы можете использовать SVG. Есть несколько способов добиться этого. Первый — иметь элемент <mask> внутри SVG и ссылаться на идентификатор этого элемента в свойстве mask-image .
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Преимущество этого подхода в том, что маску можно применить к любому элементу HTML, а не только к изображению.
В наиболее распространенном сценарии маскировки изображения вы можете вместо этого включить изображение в SVG. Первый подход — «Базовый новый доступный», включающий изображение в SVG, поддерживаемое старыми браузерами, поддерживающими версию с префиксом -webkit .
Маска с градиентом
Использование градиента CSS в качестве маски — это элегантный способ создания замаскированной области без необходимости создавать изображение или SVG.
Линейный градиент, используемый в качестве маски, может гарантировать, что нижняя часть изображения, например, под подписью не будет слишком темной.
Вы можете использовать любой из поддерживаемых типов градиентов и проявлять творческий подход по своему усмотрению. В следующем примере радиальный градиент используется для создания круглой маски для освещения за подписью.
Несколько масок
Как и в случае с фоновыми изображениями, вы можете указать несколько источников маски, комбинируя их для получения желаемого эффекта. Это особенно полезно, если вы хотите использовать в качестве маски шаблон, созданный с помощью градиентов CSS. Обычно они используют несколько фоновых изображений, поэтому их можно легко преобразовать в маску.
Например, в этих шаблонах есть шахматная доска с градиентами CSS . Код с использованием фоновых изображений выглядит следующим образом:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Чтобы превратить этот или любой другой шаблон, разработанный для фоновых изображений, в маску, вам необходимо заменить свойства background-* соответствующими свойствами mask , включая префикс -webkit .
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Применяя к изображениям градиентные узоры, можно получить несколько действительно хороших эффектов. Протестируйте некоторые другие варианты, разветвив следующий CodePen.
Помимо обрезки, маски CSS позволяют придать интерес изображениям и другим элементам HTML без необходимости использования графического приложения.