CSS mask Eigenschaft

Definition und Verwendung

mask Die Eigenschaft wird verwendet, um Elemente durch Schatten oder Schneiden von Bildern (Teil oder Ganzes) zu verbergen.

mask Die Eigenschaft ist eine Abkürzung der folgenden Eigenschaften:

Beispiel

Beispiel 1

Ein Schatten für ein Bild erstellen:

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

Probieren Sie es selbst aus

Beispiel 2

Verwenden Sie lineare und radiale Verläufe, um verschiedene Schattenschichten für ein Bild zu erstellen:

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

Probieren Sie es selbst aus

Beispiel 3

SVG <mask> Element zur Erstellung eines Schattens für ein Bild verwenden:

<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>

Probieren Sie es selbst aus

Beispiel 4

SVG <mask> Element zur Erstellung eines Schattens für ein Bild verwenden:

<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>

Probieren Sie es selbst aus

CSS-Syntax

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

Attributwert

Wert Beschreibung
mask-image Bestimmt das Bild, das als Elementmaske verwendet wird. Der Standardwert ist none.
mask-mode

Bestimmt, ob das Maskierungsimage als Helligkeitsmaske oder Alpha-Maske betrachtet werden soll.

Der Standardwert ist match-source.
mask-repeat

Stellt fest, ob und wie das Maskierungsimage wiederholt wird.

Der Standardwert ist repeat.
mask-position

Setzt den Anfangsort des Maskierungsimages (relativ zum Maskierungspositionsbereich).

Der Standardwert ist 0% 0%.
mask-clip

Bestimmt den Bereich, den das Maskierungsimage beeinflusst.

Der Standardwert ist border-box.
mask-origin

Bestimmt den Anfangsort des Maskierungsimages (der Maskierungspositionsbereich).

Der Standardwert ist border-box.
mask-size

Bestimmt die Größe des Maskierungsimages.

Der Standardwert ist auto.
mask-composite

Bestimmt die Syntheseoperation, die zwischen der aktuellen und der darunter liegenden Maskierung verwendet wird.

Der Standardwert ist add.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von seinem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: none match-source repeat 0% 0% border-box border-box auto add
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS Masking Module Level 1
JavaScript-Syntax: object.style.mask="url(star.svg)"

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-Verdeck

Referenz:CSS mask Eigenschaft

Referenz:CSS mask-clip Eigenschaft

Referenz:CSS mask-composite 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