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

Nur zurücksetzbare Untereigenschaften

Diese Eigenschaft setzt die folgenden CSS-Eigenschaften auf ihre Ausgangswerte zurück:

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width

Syntax

/* Keyword value */
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 durch Kommas getrennte Maskierungsebenen, die aus den folgenden Komponenten bestehen:

<mask-reference>

Legt die Quelle des Maskenbilds 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, legt er die Werte der Eigenschaften mask-origin und 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 vom Maskenbild betroffenen Bereich fest. Siehe mask-clip.

<compositing-operator>

Legt die auf der aktuellen Maskierungsebene verwendete Compositing-Operation fest. Siehe mask-composite.

Beschreibung

Die Kurzform-Eigenschaft mask verbirgt einen Teil oder das gesamte Element, auf das sie angewendet wird. Welche Teile des Elements verborgen, sichtbar oder teilweise angezeigt werden, hängt entweder von der Deckkraft (Alphakanal der Maske) oder der Helligkeit (Luminanz) der Maske ab. Bei der Alpha-Maskierung 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 Bestandteilseigenschaften der Maske deklariert werden müssen, erhalten ausgelassene Werte ihre Ausgangswerte, die wie folgt lauten:

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 Komponente mask-size nach dem Wert mask-position stehen, wobei ein Schrägstrich (/) die beiden trennt.

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

Da die Kurzform mask alle mask-border-*-Eigenschaften auf ihren Wert initial zurücksetzt, sollten Sie diese Eigenschaften – oder die Kurzform mask-border – nach allen mask-Deklarationen deklarieren. Wenn Sie mask in Ihrem Deklarationsblock festlegen, legen Sie außerdem implizit Folgendes fest:

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 Kurzform mask anstelle der einzelnen Komponenteneigenschaften zu verwenden, um zuvor in der Kaskade festgelegte Masken zu überschreiben. Dadurch wird sichergestellt, dass auch mask-border 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           |
  repeat-block       |
  repeat-inline      |
  <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

Maskieren eines Bildes

In diesem Beispiel wird ein Bild unter Verwendung eines CSS-generierten wiederholenden konischen Farbverlaufs als Maskenquelle maskiert. Zum Vergleich zeigen wir den Farbverlauf auch als Hintergrundbild.

HTML

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

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

CSS

Wir legen für <img> und <div> denselben border, dasselbe padding und dieselbe Größe fest.

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

Anschließend wenden wir eine Maske auf <img> an. Das mask-image wird mithilfe einer Funktion repeating-conic-gradient() generiert. Wir definieren ihn als Farbverlauf mit 100px mal 100px, der sich ausgehend von der oberen linken Ecke der content-box des Bildes wiederholt. Wir verwenden zwei <geometry-box>-Werte; der erste legt mask-origin fest und der zweite definiert den Eigenschaftswert mask-clip. Der Farbverlauf verläuft von transparent zu einfarbigem lightgreen. Wir verwenden lightgreen, um zu verdeutlichen, 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;
}

Abschließend verwenden wir für die Kurzform-Eigenschaft background des <div> denselben Wert wie für mask.

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 die CSS-Maskierung
• CSS-Eigenschaften mask
• Deklarieren mehrerer Masken
• CSS-Maskierung-Modul
• SVG-Attribut mask
• Anwenden von SVG-Effekten auf HTML-Inhalte