mask-image

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die mask-image-CSS-Eigenschaft legt das Bild fest, das als Maskenschicht für ein Element verwendet wird. Standardmäßig bedeutet dies, dass der Alpha-Kanal des Maskenbilds mit dem Alpha-Kanal des Elements multipliziert wird. Dies kann mit der mask-mode-Eigenschaft gesteuert werden.

Syntax

css
/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image> values */
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image:
  image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;

Werte

none

Dieses Schlüsselwort wird als transparente schwarze Bildschicht interpretiert.

<mask-source>

Ein <url>-Verweis auf ein <mask> oder ein CSS-Bild.

Hinweis: Nur Bildquellen, die über die HTTP- und HTTPS-Protokolle bereitgestellt werden, werden aufgrund der CORS-Richtlinie akzeptiert. Lokal bereitgestellte Bilder, einschließlich relativer oder absoluter file://-Protokolle, werden nicht akzeptiert. Um URL-Bildquellen lokal zu testen, richten Sie einen lokalen Server ein.

<image>

Ein Bildwert, der als Maskenbildschicht verwendet wird.

In den folgenden Fällen wird die Maske als eine transparente schwarze Bildschicht gezählt:

  • Das Maskenbild ist leer (Breite oder Höhe gleich null)
  • Das Maskenbild kann nicht heruntergeladen werden
  • Das Maskenbildformat wird vom Browser nicht unterstützt
  • Das Maskenbild existiert nicht
  • Der Maskenwert verweist nicht auf ein Maskenbild

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Berechneter Wertwie angegeben, aber mit absoluten <url> Werten
Animationstypdiskret

Formale Syntax

mask-image = 
  <mask-reference>#  

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Festlegen eines Maskenbilds mit einer URL und einem Verlauf

html
<div class="masked"></div>
css
.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;

  background: red;
  mask-image:
    url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg),
    radial-gradient(transparent 50%, black);
}

Spezifikationen

Specification
CSS Masking Module Level 1
# the-mask-image

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch