mask-mode ගුණය

mask-mode ගුණය අංගයක පසුබිම සමග mask එක අන්තර්ක්‍රියා කරන ආකාරය සකසයි. එය mask එක පිංතූර mask එකේ ඇල්ෆා නාලිකාව (පාරදෘෂ්‍යතාව) හෝ දීප්ති අගයන් (luminance) භාවිතා කරයිද යන්න තීරණය කරයි.

වාක්‍ය රීතිය

තෝරන්නා {
	mask-mode: alpha | luminance | match-source;
}

අගයන්

අගය	විස්තරය
`alpha`	Mask එක පිංතූරයේ ඇල්ෆා නාලිකාව (පාරදෘෂ්‍යතාව) පමණක් භාවිතා කරයි.
`luminance`	Mask එක පිංතූරයේ දීප්ති අගයන් භාවිතා කරයි (සුදු = දෘශ්‍යමාන, කළු = පාරදෘෂ්‍ය).
`match-source`	පිංතූර සඳහා ඇල්ෆා නාලිකාව භාවිතා කරයි, SVG සඳහා luminance භාවිතා කරයි (පෙරනිමි අගය).

නිදර්ශනය . Alpha මාදිලිය

Alpha මාදිලියේ SVG mask එකක් යෙදීම:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: alpha;
}

නිදර්ශනය . Luminance මාදිලිය

Luminance මාදිලියේ SVG mask එකක් යෙදීම:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: luminance;
}

නිදර්ශනය . match-source මාදිලිය සමග SVG mask

SVG සඳහා පෙරනිමි අගය (match-source) භාවිතා කිරීම:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="svg-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	mask: url(#svg-mask);
	mask-mode: match-source;
}

නිදර්ශනය . විවිධ මාදිලි සමග සංයුක්ත කිරීම

විවිධ ආලේප මාදිලි සමග masks සංයෝජනය කිරීම:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat alpha,
		url("arrow.svg") 200px 30px / 150px no-repeat luminance;
	mask-composite: add;
}

මෙයද බලන්න

mask-image ගුණය,
mask සඳහා පිංතූරයක් නියම කරයි
mask-composite ගුණය,
කිහිපයක් masks අන්තර්ක්‍රියා අර්ථ දක්වයි
mask ගුණය,
masking සියලු ගුණ සඳහා සංක්ෂිප්ත ආකාරය