mask-image ගුණය

mask-image ගුණය අංගයක් සඟවීම සඳහා භාවිතා කරන රූපයක් නියම කිරීමට ඉඩ සලසයි. සඟවන ලද ප්‍රදේශ සහ නොසඟවන ලද ප්‍රදේශ මාස්කය මගින් නිර්ණය කරයි. මාස්කයක් ලෙස SVG, PNG රූප හෝ අරීය වර්ණාවලී භාවිතා කළ හැකිය.

වාක්‍ය රචනා ක්‍රමය

තෝරන්නා {
	mask-image: none | <image> | <url>;
}

අගයන්

අගය	විස්තරය
`none`	මාස්ක් කිරීම අක්‍රිය කරයි (පෙරනිමි අගය).
`url()`	මාස්ක් රූපය වෙත මාර්ගය (SVG, PNG).
`linear-gradient()`	මාස්කයක් ලෙස රේඛීය අරීය වර්ණාවලිය.
`radial-gradient()`	මාස්කයක් ලෙස අරයීය අරීය වර්ණාවලිය.

උදාහරණය . මාස්කයක් ලෙස SVG භාවිතා කිරීම

රූපයක් මත මාස්කයක් ලෙස SVG හදවතක රූපය අයදමු:

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

උදාහරණය . මාස්කයක් ලෙස අරීය වර්ණාවලියක් භාවිතා කිරීම

අංගයක් සඳහා මාස්කයක් ලෙස රේඛීය අරීය වර්ණාවලියක් යොදමු:

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

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

උදාහරණය . මාස්කයක් ලෙස SVG අංගයක් භාවිතා කිරීම

SVG අංගයක් භාවිතයෙන් මාස්කයක් සාදා එය රූපයට යොදමු:

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

මෙයද බලන්න

mask-position ගුණය,
අංගයට සාපේක්ෂව මාස්කයේ ස්ථානය නිර්වචනය කරයි
mask-size ගුණය,
මාස්කයේ ප්‍රමාණය නිර්වචනය කරයි
mask-repeat ගුණය,
මාස්කයේ පුනරාවර්තනය නිර්වචනය කරයි
mask-mode ගුණය,
මාස්කය පසුබිම සමඟ අන්තර්ක්‍රියා කරන ආකාරය නිර්වචනය කරයි
mask ගුණය,
සියලු මාස්කිං ගුණාංග සඳහා කෙටි යෙදුම