Использование масок в CSS

Использование масок в CSS

Когда вы обрезаете элемент с помощью свойства clip-path, обрезанная область становится невидимой. Если вместо этого вы хотите сделать часть изображения непрозрачной или применить к ней какой-либо другой эффект, вам необходимо использовать маски. В этом посте объясняется, как использовать свойство mask-image в CSS, которое позволяет указать изображение для использования в качестве слоя маски. Это можно сделать тремя вариантами. Вы можете использовать файл изображения в качестве маски, SVG или градиента.

Совместимость с браузерами

Большинство браузеров только частично поддерживают стандартное свойство маскировки CSS. Вам нужно будет использовать префикс -webkit- в дополнение к стандартному свойству, чтобы достичь наилучшей совместимости с браузером. Подробную информацию по совместимости браузеров с масками можно узнать на сайте Can I use CSS Masks.

Хотя браузеры хорошо поддерживают свойства с префиксами, при использовании свойств без префиксов для отображения текста поверх изображения позаботьтесь о том, что маска на изображении применится. Возможно, стоит использовать запросы функций для обнаружения поддержки mask-image или -webkit-mask-image и предоставления удобочитаемой альтернативы перед добавлением вашей версии с маской.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}


Маскировка изображением

Свойство mask-image работает аналогично свойству background-image. Используйте значение url () для указания пути изображения. Изображение маски должно иметь прозрачную или полупрозрачную область.

Полностью прозрачная область сделает часть изображения под этой областью невидимой. Однако использование полупрозрачной области позволит просвечивать часть исходного изображения. Вы можете увидеть разницу ниже. Первое изображение - это исходное изображение воздушных шаров без маски. Ко второму изображению применена маска с белой звездой на полностью прозрачном фоне. Третье изображение имеет белую звезду на фоне с градиентной прозрачностью.


В этом примере я также использую свойство mask-size со значением cover. Это свойство работает так же, как background-size. Вы можете использовать ключевые слова cover и contain, или вы можете задать размер фона, используя любую допустимую единицу длины или процент.

Вы также можете повторять маску так же, как и фоновое изображение, чтобы использовать небольшое изображение в качестве повторяющегося узора.

Маскирование с помощью SVG

Вместо того, чтобы использовать файл изображения в качестве маски, вы можете использовать SVG. Этого можно добиться несколькими способами. Первый - это иметь элемент <mask> внутри SVG и ссылаться на идентификатор этого элемента в свойстве mask-image.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>
<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>
.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

Преимущество этого подхода в том, что маску можно применить к любому элементу HTML, а не только к изображению. К сожалению, Firefox - единственный браузер, поддерживающий такой подход.
Однако еще не все потеряно, так как для наиболее распространенного сценария маскировки изображения мы можем включить изображение в SVG.

Маскировка градиентом

Использование градиента CSS в качестве маски - это элегантный способ создания замаскированной области без необходимости создавать изображение или SVG.
Простой линейный градиент, используемый в качестве маски, может гарантировать, что нижняя часть изображения не будет слишком темной, например, под подписью.


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


Использование нескольких масок


Как и в случае с фоновыми изображениями, вы можете указать несколько источников маски, комбинируя их для получения желаемого эффекта. Это особенно полезно, если вы хотите использовать в качестве маски шаблон, созданный с помощью градиентов 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- * соответствующими свойствами маски, включая префиксы -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;

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

Наряду с обрезкой, маски CSS - это способ обратить внимание к изображениям и другим элементам HTML без необходимости использования графического приложения.

Комментарии

Чтобы оставить комментарии небходимо войти с помощью своего аккаунта.
Пока никто не оставил комментарий. Станьте первым.