Egenskapen mask-image
Egenskapen mask-image lar deg angi et bilde som skal brukes som maske for et element. Masken bestemmer hvilke deler av elementet som skal være synlige, og hvilke som skal være skjulte. Som maske kan du bruke SVG, PNG-bilder eller gradienter.
Syntaks
selector {
mask-image: none | <image> | <url>;
}
Verdier
| Verdi | Beskrivelse |
|---|---|
none |
Deaktiverer maskering (standardverdi). |
url() |
Bane til maskebildet (SVG, PNG). |
linear-gradient() |
Lineær gradient som maske. |
radial-gradient() |
Radial gradient som maske. |
Eksempel . Bruk av SVG som maske
La oss legge et SVG-bilde av et hjerte som maske over et bilde:
<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 . Bruk av gradient som maske
La oss bruke 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 . Bruk av SVG-element som maske
La oss opprette en maske ved hjelp av et SVG-element og bruke den på et bilde:
<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å
-
egenskapen
mask-position,
definerer posisjonen til masken i forhold til elementet -
egenskapen
mask-size,
definerer størrelsen på masken -
egenskapen
mask-repeat,
definerer repetisjon av masken -
egenskapen
mask-mode,
definerer hvordan masken samhandler med bakgrunnen -
egenskapen
mask,
shorthand for alle maskeringsegenskaper