mask

Zusammensetzende Eigenschaften

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>

Ein oder mehrere kommagetrennte 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 es sowohl die Werte der Eigenschaften mask-origin als auch mask-clip. 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 vom Maskenbild betroffen ist. Siehe mask-clip.

<compositing-operator>

Legt die Kompositionsoperation fest, die auf die aktuelle Maskenschicht angewendet wird. Siehe mask-composite.

Beschreibung

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

Nicht alle zusammengehörigen Maskeneigenschaften müssen deklariert werden, alle ausgelassenen Werte verwenden ihre anfänglichen Werte, 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 jedes <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 ist die Reihenfolge der beiden Werte unerheblich. Wenn nur ein <geometry-box>-Wert vorhanden ist (ohne dass ein no-clip-Schlüsselwort angegeben ist), wird dieser Wert sowohl für die mask-origin- als auch die mask-clip-Eigenschaften verwendet.

Da die Kurzform mask alle mask-border-*-Eigenschaften auf ihren initial-Wert zurücksetzt, sollten sie diese Eigenschaften — oder die mask-border-Kurzform — nach allen mask-Deklarationen angeben. Wenn Sie mask in Ihrem Deklarationsblock setzen, legen Sie auch 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 mask-Kurzform zu verwenden, anstatt die einzelnen Komponenteneigenschaften, um alle zuvor in der Kaskade festgelegten Masken zu überschreiben. Dies stellt sicher, 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           |
  <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 in 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 den gleichen border, padding und die 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 erzeugt. Wir definieren es als 100px mal 100px großen Verlauf, der sich ab der oberen linken Ecke der 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 Verlauf reicht von transparent zu solid 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 den gleichen Wert für die Kurzform-Eigenschaft background des <div>, den wir für die mask genutzt 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
• CSS Maskierungsmodul
• SVG mask Attribut
• Anwenden von SVG-Effekten auf HTML-Inhalte