Egenskapen mask-image

Egenskapen mask-image låter dig ange en bild som ska användas som mask för ett element. Masken bestämmer vilka delar av elementet som kommer att vara synliga och vilka som kommer att döljas. Som mask kan du använda SVG, PNG-bilder eller gradienter.

Syntax

selektor {
	mask-image: none | <image> | <url>;
}

Värden

Värde	Beskrivning
`none`	Stänger av maskering (standardvärde).
`url()`	Sökväg till maskbilden (SVG, PNG).
`linear-gradient()`	Linjär gradient som mask.
`radial-gradient()`	Radiell gradient som mask.

Exempel . Använda SVG som mask

Låt oss applicera en SVG-bild av ett hjärta som mask på en bild:

<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;
}

Exempel . Använda en gradient som mask

Låt oss applicera en linjär gradient som mask för ett element:

<div id="elem"></div>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, transparent, black);
}

Exempel . Använda ett SVG-element som mask

Låt oss skapa en mask med hjälp av ett SVG-element och applicera den på en bild:

<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 även

egenskapen mask-position,
definierar maskens position i förhållande till elementet
egenskapen mask-size,
definierar maskens storlek
egenskapen mask-repeat,
definierar upprepning av masken
egenskapen mask-mode,
definierar hur masken interagerar med bakgrunden
egenskapen mask,
genväg för alla maskingsegenskaper