mask

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

<mask-layer>

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

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

<geometry-box> | no-clip

Legt den von dem Maskenbild betroffenen Bereich fest. Siehe mask-clip.

<compositing-operator>

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

Die mask Kurzform-Eigenschaft verbirgt Teile des Elements, auf das sie angewendet wird, oder das gesamte Element. Die Teile des Elements, die verborgen, sichtbar oder teilweise sichtbar sind, hängen entweder von der Opazität (Alphakanal der Maske) oder der Helligkeit (Luminanz) der Maske ab. Bei der Alpha-Maskierung zeigen undurchsichtige Bereiche der Maske das Element, während transparente Bereiche es verbergen. Bei der Luminanz-Maskierung zeigen helle undurchsichtige Bereiche der Maske das Element, während dunkle oder transparente Bereiche es verbergen.

Während nicht alle bestandteilenden Maskeneigenschaften deklariert werden müssen, setzen alle ausgelassenen Werte ihre Anfangswerte, 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 kommen, 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 der <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 (und kein no-clip Schlüsselwort angegeben ist), wird dieser Wert sowohl für die mask-origin als auch für die mask-clip Eigenschaften verwendet.

Da die mask Kurzform alle mask-border-* Eigenschaften auf ihren initial Wert zurücksetzt, sollten diese Eigenschaften — oder die mask-border Kurzform — nach allen mask Deklarationen deklariert werden. Wenn mask in Ihrem Deklarationsblock festgelegt wird, setzen Sie implizit auch 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 Kurzform anstelle der einzelnen Bestandteileigenschaften, um alle vorher im Kaskadenablauf 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 mit einem von CSS generierten sich wiederholenden Kegelverlauf als Maskenquelle maskiert. Wir zeigen auch den Gradienten als Hintergrundbild zum Vergleich.

HTML

Wir binden 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 denselben border, padding, und Größen auf sowohl die <img> als auch die <div>.

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

Dann wird eine Maske auf das <img> angewendet. Das mask-image wird mithilfe einer repeating-conic-gradient() Funktion generiert. Wir definieren es als einen 100px mal 100px großen Gradient, der von der oberen linken Ecke der content-box des Bildes wiederholt wird. Wir fügen zwei <geometry-box> Werte hinzu; der erste setzt den 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 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 Kurzform-Eigenschaft des <div> wie für die mask.

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
• Einführung in die CSS-Maskierung
• CSS-mask-Eigenschaften
• Deklaration mehrerer Masken
• CSS-Maskierung Modul
• SVG mask Attribut
• Anwenden von SVG-Effekten auf HTML-Inhalt