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>

Ein oder mehrere kommagetrennte Maskenschichten, bestehend aus den folgenden Komponenten:

<mask-reference>

Legt die Maskenbild-Quelle 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, werden sowohl die mask-origin als auch die mask-clip Eigenschaftswerte festgelegt. 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 Bereich fest, der von der Maske betroffen ist. Siehe mask-clip.

<compositing-operator>

Legt die Zusammensetzungsoperation für die aktuelle Maskenschicht fest. Siehe mask-composite.

Die mask Kurzform-Eigenschaft verbirgt Teile oder das gesamte Element, auf das sie angewendet wird. 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 enthüllen undurchsichtige Bereiche der Maske das Element, während transparente Bereiche es verbergen. Bei der Luminanz-Maskierung enthüllen helle undurchsichtige Bereiche der Maske das Element, während dunkle oder transparente Bereiche es verbergen.

Obwohl nicht alle untergeordneten Maskeneigenschaften deklariert werden müssen, nehmen alle weggelassenen Werte ihre Initialwerte an, 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 no-clip Schlüsselwort vorhanden sind, 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. Ist nur ein <geometry-box> Wert vorhanden (ohne Angabe des no-clip Schlüsselworts), wird dieser Wert sowohl für die mask-origin als auch 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 Sie mask in Ihrem Deklarationsblock setzen, legen Sie auch implizit die folgenden Eigenschaften 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 mask Kurzform anstelle der einzelnen Komponenteneigenschaften zu verwenden, um alle zuvor in der Kaskade gesetzten Masken zu überschreiben. Dies stellt sicher, dass auch der mask-border 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 CSS-generierten, sich wiederholenden konischen Farbverlauf als Maskenquelle maskiert. Wir zeigen den Farbverlauf auch als Hintergrundbild zum Vergleich.

HTML

Wir fügen einen <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 dasselbe border, padding und dieselbe Größe sowohl auf das <img> als auch auf das <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 mithilfe einer repeating-conic-gradient() Funktion erzeugt. Wir definieren es als einen 100px mal 100px großen Farbverlauf, der sich ab der oberen linken Ecke des content-box des Bildes wiederholt. Wir fügen zwei <geometry-box> Werte hinzu; der erste setzt den mask-origin und der zweite definiert den mask-clip Eigenschaftswert. Der Farbverlauf reicht von transparent bis zu festem lightgreen. Wir haben lightgreen verwendet, um zu demonstrieren, dass nicht die Farbe der Maske wichtig ist, sondern deren 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>, den wir auch 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
• Anwenden von SVG-Effekten auf HTML-Inhalte