CSS свойство mask

Определение и использование

mask Атрибут используется для скрытия элементов через маску или обрезку изображения (часть или все).

mask Атрибут является сокращенной формой следующих свойств:

Пример

Пример 1

Создание маски изображения:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

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

Пример 2

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

.mask1 {
  mask: linear-gradient(black, transparent);
}
.mask2 {
  mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

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

Пример 3

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

<svg width="600" height="400">
  <mask id="svgmask1">
    <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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

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

Пример 4

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

<svg width="600" height="400">
  <mask id="svgmask1">
    <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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

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

Синтаксис CSS

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Значение атрибута

Значение Описание
mask-image Определяет изображение, используемое в качестве маски элемента. Значение по умолчанию - none.
mask-mode

Определяет, следует ли рассматривать изображение маски как亮度 маску или alpha маску.

Значение по умолчанию - match-source.
mask-repeat

Устанавливает, повторяется ли изображение маски и как.

Значение по умолчанию - repeat.
mask-position

Устанавливает начальное положение изображения маски (относительно области положения маски).

Значение по умолчанию - 0% 0%.
mask-clip

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

Значение по умолчанию - border-box.
mask-origin

Определяет начальное положение изображения маски (область положения маски).

Значение по умолчанию - border-box.
mask-size

Определяет размер изображения маски.

Значение по умолчанию - auto.
mask-composite

Определяет операцию комpositing, используемую для текущей маски и маски под ней.

Значение по умолчанию - add.
initial Этот атрибут устанавливается в значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: none match-source repeat 0% 0% border-box border-box auto add
Ингеритность: Нет
Создание анимации: Не поддерживается. См. также:Свойства, связанные с анимацией.
Версия: Модуль маскирования CSS уровня 1
Синтаксис JavaScript: object.style.mask="url(star.svg)"

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

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

Кروм Эдж Фаерфокс Сафари Опера
120 120 53 15.4 106

Связанные страницы

Урок:CSS маска

См. также:CSS свойство mask

См. также:CSS свойство mask-clip

См. также:CSS свойство mask-composite

См. также:CSS свойство mask-image

См. также:CSS свойство mask-mode

См. также:CSS свойство mask-origin

См. также:CSS свойство mask-position

См. также:CSS свойство mask-repeat

См. также:CSS свойство mask-size

См. также:CSS свойство mask-type