mask-mode प्रॉपर्टी

mask-mode प्रॉपर्टी मास्क के एलिमेंट की बैकग्राउंड के साथ इंटरैक्ट करने के तरीके को सेट करती है। यह निर्धारित करती है कि मास्क अल्फा चैनल (पारदर्शिता) का उपयोग करेगी या मास्क इमेज की चमक (luminance) वैल्यू का।

सिंटैक्स

सिलेक्टर {
	mask-mode: alpha | luminance | match-source;
}

वैल्यूज

वैल्यू	विवरण
`alpha`	मास्क केवल इमेज के अल्फा चैनल (पारदर्शिता) का उपयोग करती है।
`luminance`	मास्क इमेज की चमक वैल्यू का उपयोग करती है (सफेद = दृश्यमान, काला = पारदर्शी)।
`match-source`	इमेज के लिए अल्फा चैनल का उपयोग करती है, SVG के लिए luminance का (डिफॉल्ट वैल्यू)।

उदाहरण . alpha मोड

alpha मोड में SVG मास्क का एप्लिकेशन:

<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 मास्क का एप्लिकेशन:

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

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

उदाहरण . SVG मास्क match-source मोड के साथ

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

उदाहरण . विभिन्न मोड के साथ कंपोजिशन

विभिन्न ब्लेंडिंग मोड वाली मास्क का कॉम्बिनेशन:

<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-composite प्रॉपर्टी,
एकाधिक मास्क के इंटरैक्शन को डिफाइन करती है
mask प्रॉपर्टी,
मास्किंग की सभी प्रॉपर्टीज के लिए शॉर्टहैंड