Egenskaben mask-image
Egenskaben mask-image giver mulighed for at indstille et billede, der vil blive brugt som maske for et element. Masken definerer, hvilke dele af elementet der vil være synlige, og hvilke der vil være skjulte. Som maske kan man bruge SVG, PNG-billeder eller gradienter.
Syntaks
selektor {
mask-image: none | <image> | <url>;
}
Værdier
| Værdi | Beskrivelse |
|---|---|
none |
Deaktiverer maskering (standardværdi). |
url() |
Sti til maskebillede (SVG, PNG). |
linear-gradient() |
Lineær gradient som maske. |
radial-gradient() |
Radial gradient som maske. |
Eksempel . Brug af SVG som maske
Påfør et SVG-billede af et hjerte som maske på et billede:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 300px;
mask-repeat: no-repeat;
}
:
Eksempel . Brug af gradient som maske
Anvend en lineær gradient som maske for et element:
<div id="elem"></div>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask-image: linear-gradient(to right, transparent, black);
}
:
Eksempel . Brug af SVG-element som maske
Opret en maske ved hjælp af et SVG-element og anvend den på et billede:
<img id="image" src="image.jpg">
<svg width="0" height="0">
<mask id="mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#image {
width: 500px;
height: 281px;
mask-image: url(#mask);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Se også
-
egenskaben
mask-position,
definerer maskens position i forhold til elementet -
egenskaben
mask-size,
definerer maskens størrelse -
egenskaben
mask-repeat,
definerer gentagelse af masken -
egenskaben
mask-mode,
definerer hvordan masken interagerer med baggrunden -
egenskaben
mask,
forkortelse for alle maskingsegenskaber