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 Kurzschreibweise versteckt ein Element (teilweise oder vollständig), indem sie das Bild an bestimmten Stellen maskiert oder ausschneidet.

Hinweis: Zusätzlich zu den unten aufgeführten Eigenschaften setzt die mask-Kurzschreibweise auch mask-border auf seinen Anfangswert zurück. Daher wird empfohlen, die mask-Kurzschreibweise anstelle anderer Kurzschreibweisen oder einzelner Eigenschaften zu verwenden, um alle früher in der Cascade gesetzten Maskeneinstellungen zu überschreiben. Dies stellt sicher, dass mask-border ebenfalls zurückgesetzt wurde, um das Inkrafttreten der neuen Stile zu ermöglichen.

Bestandteilende Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 Quellbild der Maske fest. Siehe mask-image.

<masking-mode>

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

<position>

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

<bg-size>

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

<repeat-style>

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

<geometry-box>

Wenn nur ein <geometry-box>-Wert angegeben ist, setzt er sowohl mask-origin als auch mask-clip. Bei zwei <geometry-box>-Werten setzt der erste mask-origin und der zweite mask-clip.

<geometry-box> | no-clip

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

<compositing-operator>

Legt den Kompositionsvorgang auf der aktuellen Maskenschicht fest. 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

Maskieren eines Bildes

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

Siehe auch