Маски CSS

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

атрибут mask-image

CSS mask-image атрибут указывает на изображение маски.

Изображение маски может быть PNG изображением, SVG изображением,Градиенты CSS или Элемент SVG <mask>.

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

Числовые значения в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

с -webkit- Числовые значения префиксов указывают на первую версию, поддерживающую этот префикс.

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

Чтобы использовать PNG или SVG изображение в качестве слоя маски, пожалуйста, используйте: url() Передача значения изображения маски.

Изображение маски должно иметь прозрачную или полупрозрачную область. Чёрный цвет означает полную прозрачность.

Это изображение маски, которое мы будем использовать (PNG изображение):

Это изображение из итальянской пятерки渔村:

Теперь мы приложим изображение маски (верхнее PNG изображение) в качестве слоя маски для изображения итальянской пятерки渔村:

Пример

Ниже приведен исходный код:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

Попробуйте сами

примеры объяснения

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

mask-repeat атрибут указывает, будет ли фильтрующее изображение повторяться или как оно будет повторяться. Значение no-repeat означает, что фильтрующее изображение не будет повторяться (фильтрующее изображение будет отображаться только один раз).

другой пример

Если мы пропустим mask-repeat Атрибут, фильтрующее изображение будет повторяться на всего изображении Вуячунь:

Пример

Ниже приведен исходный код:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Попробуйте сами

Использование градиента в качестве фильтра:

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

Пример линейного градиента

Здесь мы используем линейный градиент в качестве фильтра изображения. Этот линейный градиент идет от верха (черного) до низа (прозрачного):

Пример

Использование линейного градиента в качестве фильтра:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Попробуйте сами

Здесь мы используем линейный градиент и текстовый фильтр в качестве фильтра изображения:

Пример

Использование линейного градиента и текстового фильтра в качестве фильтра:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Попробуйте сами

Пример радиального градиента

Здесь мы используем радиальный градиент (формой круга) в качестве фильтра изображения:

Пример

Использование радиального градиента в качестве фильтра (кругового):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Попробуйте сами

Здесь мы используем радиальный градиент (в виде эллипса) в качестве слоя маски для изображения:

Пример

Использование другого радиального градиента в качестве слоя маски (эллипс):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Попробуйте сами

Использование SVG в качестве слоя маски

Элемент SVG <mask> можно использовать внутри SVG-графика для создания эффекта маски.

Здесь мы используем элемент SVG <mask> для создания различных слоев маски для изображения:

Пример

SVG-заслонка в виде треугольника:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Попробуйте сами

Пример

SVG-заслонка в виде звезды:

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Попробуйте сами

Пример

SVG-заслонка в виде круга:

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Попробуйте сами