mask-image
Baseline 2023Newly 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
/* 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
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
Festlegen eines Maskenbilds 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