103 of 313 menu

mask प्रॉपर्टी

mask प्रॉपर्टी मास्किंग के सभी गुणों के लिए एक शॉर्टहैंड है और निम्नलिखित सेट करने की अनुमति देती है: मास्क इमेज, उसकी पोजीशन, साइज, ब्लेंड मोड और अन्य पैरामीटर्स।

निम्नलिखित प्रॉपर्टीज के लिए एक शॉर्टहैंड प्रॉपर्टी है: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

सिंटैक्स

सेलेक्टर {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

वैल्यूज

वैल्यू	विवरण
`none`	मास्किंग को डिसेबल करता है (डिफॉल्ट वैल्यू)
`url()`	मास्क इमेज का पथ (SVG, PNG)
`linear-gradient()`	मास्क के रूप में लीनियर ग्रेडिएंट
`radial-gradient()`	मास्क के रूप में रेडियल ग्रेडिएंट
`position`	मास्क की पोजीशन (top, center, 50% 50% आदि)
`size`	मास्क का साइज (cover, contain, 100px 50px)
`repeat`	मास्क की रिपीट (no-repeat, repeat-x, space)
`mode`	ब्लेंड मोड (alpha, luminance, match-source)
`composite`	मास्क का कम्पोजिशन (add, subtract, intersect, exclude)

इमेज तैयार करना

मान लें कि हमारे पास प्रकृति की एक तस्वीर है जिसे हम क्रॉप करेंगे, और हार्ट और एरो की SVG इमेज है, जिनके आकार में हम कटआउट करेंगे:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

उदाहरण . मास्क इमेज

आइए हमारी तस्वीर पर हार्ट मास्क लगाएं:

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

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

:

उदाहरण . मास्क की पोजीशन

ऊपरी बाएं कोने में हार्ट मास्क:

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

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

:

उदाहरण . मास्क की पोजीशन

निचले दाएं कोने में हार्ट मास्क:

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

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

:

उदाहरण . मास्क की पोजीशन

बाईं ओर सेंटर में हार्ट मास्क:

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

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

:

उदाहरण . मास्क की पोजीशन

सेंटर में हार्ट मास्क:

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

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

:

उदाहरण . मास्क की पोजीशन

बाएं से 100px और ऊपर से 200px हार्ट मास्क:

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

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

:

उदाहरण . मास्क का साइज cover

cover वैल्यू मास्क को स्केल करती है ताकि यह एलिमेंट को पूरी तरह से कवर करे, अनुपात बनाए रखते हुए। यदि अनुपात मेल नहीं खाते हैं तो मास्क के किनारों को क्रॉप कर सकती है:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

उदाहरण . मास्क का साइज contain

contain वैल्यू मास्क को स्केल करती है ताकि यह एलिमेंट में पूरी तरह से फिट हो जाए, अनुपात बनाए रखते हुए। खाली जगह छोड़ सकती है:

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

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

:

उदाहरण . मास्क का साइज

फिक्स्ड साइज मास्क के सटीक आयाम सेट करता है। उदाहरण के लिए, 50px साइज की मास्क बनाएं:

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

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

:

उदाहरण . रिपीट no-repeat

no-repeat वैल्यू मास्क की रिपीट को डिसेबल करती है। मास्क निर्दिष्ट पोजीशन पर केवल एक बार दिखाई देती है:

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

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

:

उदाहरण . रिपीट repeat-x

repeat-x वैल्यू मास्क को केवल हॉरिजॉन्टल एक्सिस पर रिपीट करती है:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

उदाहरण . कम्पोजिशन add

add वैल्यू कई मास्क को जोड़ती है (परिणाम - सभी मास्क का यूनियन):

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

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

:

उदाहरण . कम्पोजिशन intersect

intersect वैल्यू केवल मास्क के इंटरसेक्शन वाले एरिया को दिखाती है:

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

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

:

उदाहरण . कम्पोजिशन exclude

exclude वैल्यू उन मास्क के एरिया को दिखाती है जो इंटरसेक्ट नहीं करते हैं:

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

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

:

उदाहरण . कम्पोजिशन subtract

subtract वैल्यू पहली मास्क से दूसरी मास्क को घटाती है। उदाहरण के लिए, एक हार्ट बनाएं और उसमें से एरो को घटाएं:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

उदाहरण . विस्तारित रिकॉर्ड mask

mask प्रॉपर्टी, अलग-अलग घटकों के रूप में लिखी गई:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

उदाहरण . इमेज के लिए 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;
	background: red;
	mask: url(#mask);
}

:

उदाहरण . ग्रेडिएंट के लिए SVG

मास्क के रूप में SVG एलिमेंट का उपयोग ग्रेडिएंट के लिए:

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

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

यह भी देखें

प्रॉपर्टी mask-position,
एलिमेंट के सापेक्ष मास्क की पोजीशन निर्धारित करती है
प्रॉपर्टी mask-image,
मास्क के लिए इमेज सेट करती है
प्रॉपर्टी mask-mode,
निर्धारित करती है कि मास्क बैकग्राउंड के साथ कैसे इंटरैक्ट करती है
प्रॉपर्टी mask-size,
मास्क का साइज निर्धारित करती है
प्रॉपर्टी mask-repeat,
मास्क की रिपीट निर्धारित करती है
प्रॉपर्टी mask-origin,
मास्क की पोजीशनिंग एरिया निर्धारित करती है
प्रॉपर्टी mask-clip,
मास्क की क्लिपिंग एरिया निर्धारित करती है
प्रॉपर्टी mask-composite,
निर्धारित करती है कि कई मास्क कैसे कंबाइन होती हैं

↑

हिन्दी▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

हम साइट के कार्य, विश्लेषण और व्यक्तिगतकरण के लिए कुकीज़ का उपयोग करते हैं। डेटा प्रसंस्करण गोपनीयता नीति के अनुसार किया जाता है।

सभी स्वीकार करें कॉन्फ़िगर करें अस्वीकार करें