CSS
Обрезка и маскировка

Синтаксис

• вырезка
• клип-путь: <clip-source> | [<basic-shape> || <clip-geometry-box>] | никто
• маскировка
• mask-image: [none | <маска-ссылка>] #
• маска-режим: [<маска-режим>] #
• mask-repeat: [<стиль повтора] #
• mask-position: [<position>] #
• mask-clip: [<geometry-box> | без обрезки ]#
• mask-origin: [<geometry-box>] #
• mask-size: [<bg-size>] #
• mask-composite: [<compositing-operator>] #
• mask: [<mask-reference> <masking-mode>? || <position> [/ <bg-size>]? || <повторный стиль> || <геометрия> || [<geometry-box> | no-clip] || <compositing-operator>] #

параметры

замечания

Обрезка (многоугольник)

CSS:

div{
  width:200px;
  height:200px;
  background:teal;
  clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML:

<div></div>

В приведенном выше примере полигональный путь отсечения используется для закрепления квадратного (200 x 200) элементов в форме треугольника. Форма вывода является треугольником, потому что путь начинается с (то есть, первые координаты находятся на) 0 0 - это верхний левый угол поля, затем идет до 0 100% - это нижний левый угол поля а затем, наконец, до 100% 50% что не что иное, как правая-средняя точка коробки. Эти пути закрываются автоматически (то есть, отправной точкой будет конечная точка), и поэтому конечная фигура имеет форму треугольника.

Это также можно использовать на элементе с изображением или градиентом в качестве фона.

Пример просмотра

Выход:

Обрезание (круг)

CSS:

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML

<div></div>

В этом примере показано, как скопировать div в круг. Элемент обрезается в круг, радиус которого 30% на основе размеров опорной коробки с его центральной точки в центре опорной коробки. Здесь, так как не предоставляется <clip-geometry-box> (другими словами, ссылочный блок), в качестве ссылочного поля будет использоваться border-box элемент.

Форма круга должна иметь радиус и центр с координатами (x,y) :

circle(radius at x y)

Пример просмотра

Выход:

Обрезка и маскировка: обзор и различие

С помощью Clipping and Masking вы можете сделать некоторые части элементов прозрачными или непрозрачными. Оба могут быть применены к любому элементу HTML.

вырезка

Клипы являются векторными дорожками. Вне этого пути элемент будет прозрачным, внутри непрозрачным. Поэтому вы можете определить свойство clip-path для элементов. Каждый графический элемент, который также существует в SVG, вы можете использовать здесь как функцию для определения пути. Примерами являются circle() , polygon() или ellipse() .

clip-path: circle(100px at center);

Элемент будет виден только внутри этого круга, который расположен в центре элемента и имеет радиус 100 пикселей.

маскировка

Маски похожи на Clips, но вместо определения пути вы определяете маску, какие слои над элементом. Вы можете представить эту маску как изображение, состоящее в основном из двух цветов: черно-белого.

Маска яркости : черный означает, что область непрозрачна, а белый - прозрачный, но есть также полупрозрачная серая область, поэтому вы можете делать плавные переходы.

Альфа-маска : только на прозрачных участках маски элемент будет непрозрачным.

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

Свойство mask позволяет указать тип маски и изображение, которое будет использоваться как слой.

mask: url(masks.svg#rectangle) luminance;

Элемент, называемый rectangle определенным в masks.svg будет использоваться в качестве маски яркости для элемента.

Простая маска, которая уменьшает изображение от сплошного до прозрачного

CSS

div {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
  mask-image: linear-gradient(to right, white, transparent); 
}

HTML

<div></div>

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

Маскирование достигается с помощью linear-gradient который идет от белого (слева) до прозрачного (справа) в качестве маски. Поскольку это альфа-маска, изображение становится прозрачным, когда маска прозрачна.

Выход без маски:

Выход с маской:

Примечание. Как упоминалось в примечаниях, приведенный выше пример будет работать в Chrome, Safari и Opera только при использовании с префиксом -webkit . Этот пример (с linear-gradient как изображение маски) еще не поддерживается в Firefox.

Использование масок для вырезания отверстия в середине изображения

CSS

div {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/abstract/6);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

HTML

В приведенном выше примере прозрачный круг создается в центре с использованием radial-gradient и затем он используется в качестве маски для создания эффекта вырезания круга из центра изображения.

Изображение без маски:

Изображение с маской:

Использование масок для создания изображений с неправильной формой

CSS

div { /* check remarks before usage */
  height: 200px;
  width: 400px;
  background-image: url(http://lorempixel.com/400/200/nature/4);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-size: 75% 25%, 25% 25%, 100% 75%;
  mask-position: bottom left, bottom right, top left;
  mask-repeat: no-repeat;
}

HTML

<div></div>

В приведенном выше примере три изображения с linear-gradient (которые при размещении в их соответствующих положениях будут покрывать 100% х 100% от размера контейнера) используются в качестве масок для создания прозрачного треугольного реза в нижней части изображения.

Изображение без маски:

Изображение с маской: