Применяйте эффекты к изображениям с помощью свойства CSS-маски-изображения.

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

Rachel Andrew

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

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

Большинство браузеров имеют лишь частичную поддержку стандартного свойства маскировки CSS. Вам нужно будет использовать префикс -webkit- в дополнение к стандартному свойству, чтобы добиться наилучшей совместимости с браузером. См. « Могу ли я использовать маски CSS?» для получения полной информации о поддержке браузера.

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

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

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

Фото Хулио Риондо на Unsplash .