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 Alphakanal des Maskenbildes mit dem Alphakanal 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 eine <mask> oder auf ein CSS-Bild.

Hinweis: Aufgrund der CORS Richtlinie werden nur die Bildquellen akzeptiert, die über die HTTP- und HTTPS-Protokolle serviert werden. Bilder, die lokal bereitgestellt werden, 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 transparente schwarze Bildschicht gezählt:

  • das Maskenbild ist leer (Null Breite oder Null Höhe)
  • das Maskenbild kann nicht heruntergeladen werden
  • das Maskenbildformat wird vom Browser nicht unterstützt
  • das Maskenbild existiert nicht
  • der Maskenwert zeigt nicht auf ein Maskenbild

Formale Definition

Initialer Wertnone
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

Ein Maskenbild mit einer URL und einem Verlauf festlegen

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