Veturia mask-image

Veturia mask-image lejon të vendosni një imazh që do të përdoret si maskë për elementin. Maskë përcakton se cilat pjesë të elementit do të jenë të dukshme dhe cilat do të fshihen. Si maskë mund të përdorni imazhe SVG, PNG ose gradientë.

Sintaksa

përzgjedhësi {
	mask-image: none | <image> | <url>;
}

Vlerat

Vlera	Përshkrimi
`none`	Çaktivizon maskimin (vlera e paracaktuar).
`url()`	Rruga te imazhi-maskë (SVG, PNG).
`linear-gradient()`	Gradient linear si maskë.
`radial-gradient()`	Gradient radial si maskë.

Shembull . Përdorimi i SVG-së si maskë

Le të vendosim një imazh SVG të zemrës si maskë mbi fotografi:

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

Shembull . Përdorimi i gradientit si maskë

Le të aplikojmë një gradient linear si maskë për elementin:

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

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

Shembull . Përdorimi i elementit SVG si maskë

Le të krijojmë një maskë duke përdorur një element SVG dhe ta aplikojmë atë në imazh:

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

Shihni gjithashtu

veturia mask-position,
përcakton pozicionin e maskës në lidhje me elementin
veturia mask-size,
përcakton madhësinë e maskës
veturia mask-repeat,
përcakton përsëritjen e maskës
veturia mask-mode,
përcakton se si maska ndërvepron me sfondin
veturia mask,
shkurtim për të gjitha vetitë e maskimit