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 wird der Alphakanal des Maskenbildes mit dem Alphakanal des Elements multipliziert. Dies kann mit der mask-mode
Eigenschaft gesteuert werden.
Syntax
/* 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 Bildquellen akzeptiert, die über HTTP- und HTTPS-Protokolle bereitgestellt werden. 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 transparente schwarze Bildschicht gezählt:
- das Maskenbild ist leer (Breite oder Höhe ist null)
- 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
Anfangswert | none |
---|---|
Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen |
Vererbt | Nein |
Berechneter Wert | wie angegeben, aber mit absoluten <url> Werten |
Animationstyp | diskret |
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
Einstellen eines Maskenbildes mit einer URL und einem Verlauf
<div class="masked"></div>
.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