CSS-свойство `mask-composite`

mask-composite — свойство CSS, определяющее операцию композитинга, применяемую к текущему слою маски вместе с расположенными под ним слоями маски.

Синтаксис

/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: revert-layer;
mask-composite: unset;

Значения

Свойство принимает список разделённых запятыми ключевых значений <compositing-operator>, каждое из которых представляет собой оператор композитинга Портера — Даффа, определяющий операцию композитинга, применяемую к текущему слою маски вместе с расположенными под ним слоями маски, включая:

add

Связанное изображение маски размещается поверх всех расположенных под ним слоёв маски (с применением соответствующих операторов композитинга). Это значение по умолчанию.

subtract

Связанное изображение маски размещается там, где оно выходит за пределы всех расположенных под ним слоёв маски (с применением соответствующих операторов композитинга).

intersect

Части связанного изображения маски, перекрывающие все скомпонованные слои маски под ним, заменяют ранее скомпонованные слои.

exclude

Неперекрывающиеся области связанного изображения маски и расположенных под ним слоёв маски объединяются с применением соответствующих операторов композитинга.

Описание

Если к элементу применено несколько слоёв маски, свойство mask-composite можно использовать, чтобы определить, как эти маски взаимодействуют друг с другом или объединяются для создания итогового эффекта маски.

Количество слоёв определяется количеством разделённых запятыми значений в значении свойства mask-image (даже если значение равно none). Каждое значение mask-composite в списке значений, разделённых запятыми, сопоставляется со значением mask-image в том же порядке. Если количество значений в mask-composite равно или превышает количество значений mask-image, лишние значения игнорируются. Если в свойстве mask-composite недостаточно значений, разделённых запятыми, чтобы сопоставить их с количеством слоёв, список значений повторяется до тех пор, пока их не станет достаточно.

При обработке исходный слой — текущее или связанное изображение слоя маски — добавляется к целевым слоям (по умолчанию), вычитается из них, пересекается с ними или исключается из них. Целевые слои — это слои маски, расположенные под исходным, с применёнными к ним соответствующими операторами композитинга; сюда входят все предыдущие слои, скомпонованные в порядке появления в списке масок, разделённых запятыми. Все слои маски под текущим слоем должны быть скомпонованы до применения операции композитинга для текущего слоя. Перед объединением с использованием заданного значения композитинга изображения слоёв маски преобразуются в альфа-маски.

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

Формальное определение

Формальный синтаксис

mask-composite = 
  <compositing-operator>#

<compositing-operator> = 
  add |
  subtract |
  intersect |
  exclude

Примеры

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

В этом примере показано основное использование свойства mask-composite.

HTML

Добавим элемент <div>, который затем стилизуем.

<div></div>

CSS

Зададим размер и цвет для нашего <div>, затем добавим два элемента mask-image и с помощью свойства mask-size зададим им размер, соответствующий размеру маскируемого элемента. Наконец, вычтем второе изображение маски из первого, задав для свойства mask-composite значение subtract.

div {
  width: 100px;
  height: 100px;
  background-color: red;

  mask-image:
    url("https://mdn.github.io/shared-assets/images/examples/mdn.svg"),
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
  mask-size: 100% 100%;

  mask-composite: subtract;
}

Результат

Сравнение значений

В этом примере показаны четыре ключевых значения <compositing-operator> свойства mask-composite, а также сравниваются эффекты режимов маски alpha и luminance.

HTML

У нас есть элемент <table>, содержащий восемь изображений. Для краткости <table> скрыт.

<table>
  <tbody>
    <tr>
      <th colspan="4">mask-type: alpha</th>
    </tr>
    <tr>
      <th>mask-composite: add</th>
      <th>mask-composite: subtract</th>
      <th>mask-composite: intersect</th>
      <th>mask-composite: exclude</th>
    </tr>
    <tr class="alphaMaskType">
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>

    <tr>
      <th colspan="4">
        <code>mask-type: luminance</code>
      </th>
    </tr>
    <tr>
      <th>mask-composite: add</th>
      <th>mask-composite: subtract</th>
      <th>mask-composite: intersect</th>
      <th>mask-composite: exclude</th>
    </tr>
    <tr class="luminanceMaskType">
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

А также SVG с четырьмя масками: альфа-масками в форме сердца и круга и масками яркости в форме сердца и круга. Маски-сердца заданы с помощью сплошных цветов. Маски-круги созданы с помощью полупрозрачных белых и чёрных цветов stroke и fill.

<svg height="0" width="0">
  <mask id="heartAlpha" class="alpha">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green"
      stroke="white"
      stroke-width="20" />
  </mask>
  <mask id="circleAlpha" class="alpha">
    <circle
      cx="130"
      cy="130"
      r="50"
      fill="rgb(0 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 0.5)"
      stroke-width="20" />
  </mask>
  <mask id="heartLuminance" class="luminance">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green"
      stroke="white"
      stroke-width="20" />
  </mask>
  <mask id="circleLuminance" class="luminance">
    <circle
      cx="130"
      cy="130"
      r="50"
      fill="rgb(0 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 0.5)"
      stroke-width="20" />
  </mask>
</svg>

CSS

Сначала стилизуем элементы <mask>, задав для свойства mask-type каждой маски значение alpha или luminance.

mask.luminance {
  mask-type: luminance;
}

mask.alpha {
  mask-type: alpha;
}

Затем применим маски-сердца и маски-круги в качестве разделённых запятыми значений свойства mask-image. Они применяются к каждому элементу <img>, причём все изображения в одной строке получают одинаковые маски.

/* apply the mask images */
tr.alphaMaskType img {
  mask-image: url("#heartAlpha"), url("#circleAlpha");
}

tr.luminanceMaskType img {
  mask-image: url("#heartLuminance"), url("#circleLuminance");
}

Наконец, скомпонуем маски с помощью свойства mask-composite, применяя четыре разных перечислимых значения mask-composite по столбцам таблицы.

/* property we're testing */
td:nth-of-type(1) img {
  mask-composite: add;
}
td:nth-of-type(2) img {
  mask-composite: subtract;
}
td:nth-of-type(3) img {
  mask-composite: intersect;
}
td:nth-of-type(4) img {
  mask-composite: exclude;
}

Стили таблицы скрыты для краткости.

mask {
  height: 50%;
}

table,
td,
th {
  border: 1px solid;
}
th {
  font-family: monospace;
}
th {
  color: green;
}
body > img {
  display: none;
}

Результаты

Спецификации

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

См. также

• сокращённая запись mask
• mask-type
• mask-mode
• Введение в маскирование CSS
• Свойства маскирования CSS mask
• Объявление нескольких масок
• модуль маскирования CSS