mask

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

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

<mask-layer>

Eine oder mehrere durch Kommas getrennte Maskenschichten, bestehend aus den folgenden Komponenten:

<mask-reference>

Legt die Quelle für das Maskenbild 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, dann legt der erste mask-origin und der zweite mask-clip fest.

<geometry-box> | no-clip

Legt den Bereich fest, der durch das Maskenbild beeinflusst wird. Siehe mask-clip.

<compositing-operator>

Legt den Kompositionsvorgang fest, der auf der aktuellen Maskenschicht verwendet wird. Siehe mask-composite.

Die Eigenschaft mask verbirgt Teile oder das ganze Element, auf das sie angewendet wird. Welche Teile verborgen, sichtbar oder teilweise gerendert werden, hängt von der Deckkraft der Maske an diesem Pixel ab. Die durch undurchsichtige Teile der Maske maskierten Abschnitte sind vollständig verborgen, während transparente Abschnitte der Maske das Element sichtbar machen.

Während nicht alle Bestandteil-Maskeneigenschaften deklariert werden müssen, werden alle Werte, die ausgelassen werden, auf ihre Anfangswerte zurückgesetzt, die folgende 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 jedes <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. Befindet sich ein <geometry-box>-Wert und das Schlüsselwort no-clip, ist das <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 spezifiziertes no-clip Schlüsselwort), wird dieser Wert sowohl für die mask-origin- als auch für die mask-clip-Eigenschaften verwendet.

Da die mask-Kurzschreibweise alle mask-border-*-Eigenschaften auf ihren initial Wert zurücksetzt, sollten Sie diese Eigenschaften — oder die mask-border-Kurzschreibweise — nach allen mask-Deklarationen angeben. Wenn Sie mask in Ihrem Deklarationsblock setzen, setzen Sie auch implizit Folgendes:

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 Verwendung der mask-Kurzschreibweise anstelle der einzelnen Komponenten-Eigenschaften, um alle zuvor in der Kaskade gesetzten Masken zu überschreiben. Dies stellt sicher, dass mask-border ebenfalls zurückgesetzt wurde.

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

In diesem Beispiel wird ein Bild unter Verwendung eines durch CSS generierten sich wiederholenden konischen Verlaufs als Maskenquelle maskiert. Wir zeigen den Verlauf auch als Hintergrundbild zum Vergleich.

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 setzen die gleichen border-, padding- und Größenangaben auf sowohl dem <img> als auch dem <div>.

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

Wir wenden dann eine Maske auf das <img> an. Das mask-image wird durch eine repeating-conic-gradient()-Funktion generiert. Wir definieren es als einen 100px mal 100px großen Verlauf, der an der oberen linken Ecke der content-box des Bildes beginnt. Wir fügen zwei <geometry-box>-Werte ein; der erste setzt die mask-origin und der zweite definiert den mask-clip-Eigenschaftswert. Der Verlauf reicht von transparent zu solidem lightgreen. Wir haben lightgreen verwendet, um zu demonstrieren, dass es nicht die Farbe der Maske ist, die 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-Kurzschreibweise des <div>, den wir für die Maske verwendet haben.

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

Ergebnisse

• clip-path
• filter
• CSS Maskierung Modul
• SVG mask Attribut
• Anwendung von SVG-Effekten auf HTML-Inhalte