mask

Bestandteilseigenschaften

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

• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size

Syntax

/* Keyword values */
mask: none;

/* Image values */
mask: url("mask.png"); /* Raster image used as mask */
mask: url("masks.svg#star"); /* SVG used as mask */

/* Combined values */
mask: url("masks.svg#star") luminance; /* Luminance mask */
mask: url("masks.svg#star") 40px 20px; /* Mask positioned 40px from the top and 20px from the left */
mask: url("masks.svg#star") 0 0/50px 50px; /* Mask with a width and height of 50px */
mask: url("masks.svg#star") repeat-x; /* Horizontally-repeated mask */
mask: url("masks.svg#star") stroke-box; /* Mask extends to the inside edge of the stroke box */
mask: url("masks.svg#star") exclude; /* Mask combined with background using non-overlapping parts */

/* Multiple masks */
mask:
  url("masks.svg#star") left / 16px repeat-y,
  /* 16px-wide mask on the left side */ url("masks.svg#circle") right / 16px
    repeat-y; /* 16px-wide mask against right side */

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

Werte

<mask-layer>

Eine oder mehrere kommagetrennte Maskenschichten, die aus folgenden Komponenten bestehen:

<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 wird, legt er sowohl die Werte der Eigenschaften mask-origin als auch mask-clip fest. Wenn zwei <geometry-box>-Werte vorhanden sind, definiert der erste mask-origin und der zweite mask-clip.

<geometry-box> | no-clip

Legt den durch das Maskenbild betroffenen Bereich fest. Siehe mask-clip.

<compositing-operator>

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

Beschreibung

Die mask-Shorthand-Eigenschaft verbirgt Teile oder das gesamte Element, auf das sie angewendet wird. Die Teile des Elements, die verborgen, sichtbar oder teilweise gezeigt werden, hängen entweder von der Opazität (Alpha-Kanal der Maske) oder der Helligkeit (Luminanz) der Maske ab. Bei der Alphamaskierung legen undurchsichtige Bereiche der Maske das Element frei, während transparente Bereiche es verbergen. Bei der Luminanzmaskierung legen helle undurchsichtige Bereiche der Maske das Element frei, während dunkle oder transparente Bereiche es verbergen.

Obwohl nicht alle Masken-Bestandteilseigenschaften deklariert werden müssen, setzen alle ausgelassenen Werte auf ihre Standardwerte zurück, die sind:

mask-image: none;
mask-mode: match-source;
mask-position: 0% 0%;
mask-size: auto;
mask-repeat: repeat;
mask-origin: border-box;
mask-clip: border-box;
mask-composite: add;

Innerhalb jeder <mask-layer> muss die mask-size-Komponente nach dem mask-position-Wert stehen, wobei ein Schrägstrich (/) die beiden trennt.

Wenn zwei <geometry-box>-Werte vorhanden sind, ist der erste der mask-origin-Wert, während der zweite der mask-clip-Wert ist. Wenn ein <geometry-box>-Wert und das Schlüsselwort no-clip vorhanden sind, ist die <geometry-box> der Wert der mask-origin-Eigenschaft, da no-clip nur für die mask-clip-Eigenschaft gültig ist. In diesem Fall spielt die Reihenfolge der beiden Werte keine Rolle. Wenn nur ein <geometry-box>-Wert vorhanden ist (ohne dass der Schlüsselbegriff no-clip angegeben ist), wird dieser Wert sowohl für die mask-origin- als auch für die mask-clip-Eigenschaft verwendet.

Da die mask-Shorthand-Eigenschaft alle mask-border-*-Eigenschaften auf ihren initial-Wert zurücksetzt, sollten Sie diese Eigenschaften — oder die mask-border-Kurzform — nach allen mask-Deklarationen angeben. Beim Setzen von mask in Ihrem Deklarationsblock setzen Sie auch implizit die folgenden:

mask-border-source: none;
mask-border-mode: alpha;
mask-border-outset: 0;
mask-border-repeat: stretch;
mask-border-slice: 0;
mask-border-width: auto;

Aus diesem Grund empfiehlt die Spezifikation, die mask-Shorthand-Eigenschaft anstelle der einzelnen Komponenteneigenschaften zu verwenden, um zuvor in der Kaskade gesetzte Masken zu überschreiben. Dies stellt sicher, dass mask-border ebenfalls zurückgesetzt wurde.

Formale Definition

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> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

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

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  <repetition>{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>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<mask-source> = 
  <url>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

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

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

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

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Maskierung eines Bildes

In diesem Beispiel wird ein Bild mit einem CSS-generierten wiederholten konischen Verlauf als Maskenquelle maskiert. Wir zeigen auch den Verlauf als Hintergrundbild zum Vergleich.

HTML

Wir fügen ein <img> und ein leeres <div>-Element hinzu.

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<div></div>

CSS

Wir setzen denselben border, padding und dieselbe Größe auf sowohl das <img> als auch das <div>.

img,
div {
  border: 20px dashed rebeccapurple;
  box-sizing: content-box;
  padding: 20px;
  height: 220px;
  width: 220px;
}

Dann wenden wir eine Maske auf das <img> an. Das mask-image wird mit einer repeating-conic-gradient()-Funktion generiert. Wir definieren es als einen 100px mal 100px großen Verlauf, der sich ab der oberen linken Ecke des content-box des Bildes wiederholt. Wir fügen zwei <geometry-box>-Werte hinzu; der erste legt das mask-origin und der zweite definiert den mask-clip-Eigenschaftswert fest. Der Verlauf reicht von transparent zu einem soliden lightgreen. Wir haben lightgreen verwendet, um zu demonstrieren, dass nicht die Farbe der Maske wichtig ist, sondern ihre Transparenz.

img {
  mask: repeating-radial-gradient(
      circle,
      transparent 0 5px,
      lightgreen 15px 20px
    )
    content-box border-box 0% 0% / 100px 100px repeat;
}

Schließlich verwenden wir denselben Wert für die background-Shorthand-Eigenschaft des <div>, wie wir ihn für die mask verwendet haben.

div {
  background: repeating-radial-gradient(
      circle,
      transparent 0 5px,
      lightgreen 15px 20px
    )
    content-box border-box 0% 0% / 100px 100px repeat;
}

Ergebnisse

Spezifikationen

Browser-Kompatibilität

Siehe auch

• clip-path
• filter
• Einführung in CSS-Maskierung
• CSS mask-Eigenschaften
• Deklarieren mehrerer Masken
• Modul CSS-Maskierung
• SVG-Attribut mask
• Anwenden von SVG-Effekten auf HTML-Inhalt