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

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

Синтаксис

/* Keyword values */
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;

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

Значения

Для этого свойства указывается одно из следующих ключевых слов:

clear

Перекрывающиеся пиксели исходного изображения маски и целевого изображения маски очищаются.

copy

Исходное изображение маски заменяет целевое изображение маски.

source-over

Исходное изображение маски отображается поверх целевого изображения маски.

source-in

Перекрывающиеся пиксели исходного изображения маски и целевого изображения маски заменяются пикселями исходного изображения маски; все остальные пиксели очищаются.

source-out

Перекрывающиеся пиксели исходного изображения маски и целевого изображения маски очищаются; все оставшиеся пиксели исходного изображения маски отображаются.

source-atop

Отображаются пиксели целевого изображения маски. Пиксели исходного изображения маски отображаются, только если они перекрывают непрозрачную область целевого изображения маски. В результате исходное изображение маски не оказывает влияния.

destination-over

Целевое изображение маски отображается поверх исходного изображения маски.

destination-in

Перекрывающиеся пиксели исходного изображения маски и целевого изображения маски сохраняются как пиксели целевого изображения маски; все остальные пиксели очищаются.

destination-out

Перекрывающиеся пиксели исходного изображения маски и целевого изображения маски очищаются; все оставшиеся пиксели исходного изображения маски отображаются.

destination-atop

Отображаются пиксели исходного изображения маски. Пиксели целевого изображения маски отображаются, только если они перекрывают непрозрачную область целевого изображения маски. В результате целевое изображение маски не оказывает влияния.

xor

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

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

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

-webkit-mask-composite = <composite-style>#

Примеры

Наложение с помощью XOR

.example {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-composite: xor, source-over;
}

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

Не входит ни в один стандарт. Это свойство определено в свойстве mask-composite с использованием других значений.

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

См. также

• mask-composite