CSS mask-composite Eigenschaft

Definition und Verwendung

mask-composite Diese Eigenschaft definiert die verwendete Syntheseoperation zwischen der aktuellen Maske und der darunter liegenden Maske.

Beispiel

Anzeige mask-composite Verschiedene Werte der Eigenschaft:

.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;
}

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
add Die Quellmaske wird über der Zielmaske positioniert.
subtract Der Teil der Quellmaske, der außerhalb der Zielmaske liegt.
intersect Der überlagerte Teil der Quellmaske ersetzt die Zielmaske.
exclude Die Bereiche der Quellmaske und der Zielmaske, die nicht übereinanderliegen, werden zusammengefügt.
initial Setzen Sie diese Eigenschaft auf ihren Standardwert. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: add
Vererbbarkeit: Nein
Animationsproduktion: Nicht unterstützt. Siehe:Animationsbezogene Attribute.
Version: CSS Masking Module Level 1
JavaScript-Syntax: object.style.maskComposite="intersect"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Oper
120 120 53 15.4 106

Verwandte Seiten

Tutorial:CSS-Abdeckung

Referenz:CSS mask Eigenschaft

Referenz:CSS mask-clip Eigenschaft

Referenz:CSS mask-image Eigenschaft

Referenz:CSS mask-mode Eigenschaft

Referenz:CSS mask-origin Eigenschaft

Referenz:CSS mask-position Eigenschaft

Referenz:CSS mask-repeat Eigenschaft

Referenz:CSS mask-size Eigenschaft

Referenz:CSS mask-type Eigenschaft