mask

Zusammengesetzte 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>

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 wird, legt er sowohl die Werte der Eigenschaften mask-origin als auch mask-clip fest. 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 dem Maskenbild betroffen ist. Siehe mask-clip.

<compositing-operator>

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

Beschreibung

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

Während nicht alle zusammengesetzten Maskeneigenschaften deklariert werden müssen, setzen alle ausgelassenen Werte ihre anfänglichen Werte voraus, die wie folgt 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. Wenn nur ein <geometry-box> Wert vorhanden ist (ohne festgelegtem no-clip Schlüsselwort), 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 Sie diese Eigenschaften — oder die mask-border Kurzform — nach allen mask Deklarationen festlegen. Beim Setzen von mask in Ihrem Deklarationsblock 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 Komponenten-Eigenschaften, um Masken, die früher in der Kaskade festgelegt wurden, zu überschreiben. Dies stellt sicher, dass mask-border ebenfalls 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> = 
  [ 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>* )  

Beispiele

Maskierung eines Bildes

In diesem Beispiel wird ein Bild mithilfe eines CSS-generierten, sich wiederholenden konischen Gradienten 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 dasselbe border, padding und dieselbe 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;
}

Wir wenden dann eine Maske auf das <img> an. Der mask-image wird mithilfe einer repeating-conic-gradient() Funktion erzeugt. Wir definieren ihn als einen 100px mal 100px großen Verlauf, der ab der oberen und 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 bis fest lightgreen. Wir verwenden lightgreen, um zu zeigen, 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 <div> background Kurzform-Eigenschaft, wie wir ihn 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• clip-path
• filter
• Einführung in CSS-Maskierung
• CSS mask Eigenschaften
• Deklaration mehrerer Masken
• CSS-Maskierung Modul
• SVG mask Attribut
• Anwendung von SVG-Effekten auf HTML-Inhalte