CSS właściwość mask-composite

Poprzednia strona mask-clip
Następna strona mask-image

Definicja i użycie

mask-composite Atrybut określa operację kompozycji używaną przez bieżącą warstwę maski i warstwę maski znajdującą się poniżej.

Przykład

Pokaz mask-composite Różne wartości atrybutu:

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

Spróbuj sam

Gramatyka CSS

mask-composite: add|subtract|intersect|exclude|initial|inherit;

Wartość atrybutu

Wartość	Opis
add	Źródłowa warstwa maski umieszczona nad docelową warstwą maski.
subtract	Obszar źródłowej warstwy maski umieszczony poza docelową warstwą maski.
intersect	Zastąpienie obszarów nachodzących na siebie źródłowej warstwy maski przez docelową warstwę maski.
exclude	Zjednoczenie obszarów, które nie nachodzą na siebie źródłowej i docelowej warstwy maski.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Inhereduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	add
Inheredność:	Nie
Tworzenie animacji:	Nie obsługuje. Zobacz:Atrybuty animacji.
Wersja:	Moduł Masking CSS Poziom 1
Gramatyka JavaScript:	object.style.maskComposite="intersect"