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 प्रॉपर्टी,
सभी मास्किंग प्रॉपर्टीज के लिए शॉर्टहैंड