mask

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die mask CSS Kurzform-Eigenschaft verbirgt ein Element (teilweise oder vollständig), indem sie das Bild an bestimmten Punkten maskiert oder zuschneidet.

Hinweis: Zusätzlich zu den unten aufgeführten Eigenschaften setzt die mask-Kurzform auch mask-border auf ihren Anfangswert zurück. Es wird daher empfohlen, die mask-Kurzform zu verwenden, anstatt andere Kurzformen oder die einzelnen Eigenschaften zu nutzen, um alle Maskeneinstellungen früher in der Kaskade zu überschreiben. Dadurch wird sichergestellt, dass mask-border ebenfalls zurückgesetzt wurde, um das Wirksamwerden der neuen Stile zu ermöglichen.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png); /* Pixel image used as mask */
mask: url(masks.svg#star); /* Element within SVG graphic used as mask */

/* Combined values */
mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px; /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */
mask: url(masks.svg#star) 0 0/50px 50px; /* Element within SVG graphic used as mask with a width and height of 50px */
mask: url(masks.svg#star) repeat-x; /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */

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

/* Multiple masks */
mask:
  url(masks.svg#star) left / 16px repeat-y,
  /* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px */
    url(masks.svg#circle) right / 16px repeat-y; /* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px */

Werte

<mask-reference>

Legt die Quelle des Maskenbildes fest. Siehe mask-image.

<masking-mode>

Legt den Maskierungsmodus des Maskenbildes fest. Siehe mask-mode.

<position>

Legt die Position des Maskenbildes fest. Siehe mask-position.

<bg-size>

Legt die Größe des Maskenbildes fest. Siehe mask-size.

<repeat-style>

Legt die Wiederholung des Maskenbildes fest. Siehe mask-repeat.

<geometry-box>

Wenn nur ein <geometry-box>-Wert angegeben ist, legt er sowohl mask-origin als auch mask-clip fest. Wenn zwei <geometry-box>-Werte vorhanden sind, legt der erste mask-origin und der zweite mask-clip fest.

<geometry-box> | no-clip

Legt den Bereich fest, der vom Maskenbild betroffen ist. Siehe mask-clip.

<compositing-operator>

Legt den Kompositionsvorgang fest, der auf die aktuelle Maskenschicht angewendet wird. Siehe mask-composite.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • mask-image: wie angegeben, aber mit absoluten <url> Werten
  • mask-mode: wie angegeben
  • mask-repeat: Besteht aus zwei Schlüsselwörtern, einem pro Richtung
  • mask-position: Besteht aus zwei Schlüsselwörtern, die den Ursprung und die beiden Versätze vom Ursprung repräsentieren, wobei beide als absolute Länge angegeben werden (falls eine <length> angegeben wurde), ansonsten einen Prozentwert.
  • mask-clip: wie angegeben
  • mask-origin: wie angegeben
  • mask-size: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
  • mask-composite: wie angegeben
Animationstypwie die jeweiligen Kurzschreibweisen:
Erstellt StapelkontextJa

Formale Syntax

mask = 
  <mask-layer>#  

<mask-layer> = 
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>                

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

<geometry-box> = 
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box     

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

<masking-mode> = 
  alpha         |
  luminance     |
  match-source  

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<length-percentage> = 
  <length>      |
  <percentage>  

<shape-box> = 
  <visual-box>  |
  margin-box    

<url> = 
  <url()>  |
  <src()>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Eine Maske auf ein Bild anwenden

css
.target {
  mask: url(#c1) luminance;
}

.another-target {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}

Spezifikationen

Specification
CSS Masking Module Level 1
# the-mask

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch