सीएसएस मास्किंग
CSS मास्किंग के साथ आप तत्व के कुछ हिस्सों को आंशिक रूप से या पूरी तरह से छिपाने के लिए एक तत्व पर रखने के लिए एक मुखौटा परत बनाते हैं।
सीएसएस मुखौटा-छवि संपत्ति
CSS mask-imageगुण एक मुखौटा परत छवि निर्दिष्ट करता है।
मुखौटा परत छवि एक पीएनजी छवि, एक एसवीजी छवि, एक सीएसएस ढाल , या एक एसवीजी <मास्क> तत्व हो सकती है ।
ब्राउज़र समर्थन
नोट: अधिकांश ब्राउज़रों के पास CSS मास्किंग के लिए केवल आंशिक समर्थन है। आपको अधिकांश ब्राउज़रों में मानक संपत्ति के अतिरिक्त -webkit- उपसर्ग का उपयोग करने की आवश्यकता होगी।
नीचे दी गई तालिका की संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है। -वेबकिट के बाद की संख्याएं- उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
एक छवि का उपयोग मास्क परत के रूप में करें
PNG या SVG इमेज को मास्क लेयर के रूप में उपयोग करने के लिए, मास्क लेयर इमेज में पास करने के लिए url() मान का उपयोग करें।
मुखौटा छवि में एक पारदर्शी या अर्ध-पारदर्शी क्षेत्र होना चाहिए। काला पूरी तरह से पारदर्शी इंगित करता है।
यहाँ मुखौटा छवि (एक पीएनजी छवि) है जिसका हम उपयोग करेंगे:
यहाँ इटली में Cinque Terre की एक छवि है:
अब, हम Cinque Terre, इटली से छवि के लिए मुखौटा छवि (ऊपर PNG छवि) को मुखौटा परत के रूप में लागू करते हैं:
उदाहरण
यहाँ स्रोत कोड है:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
उदाहरण समझाया गया
mask-imageसंपत्ति एक तत्व के लिए मुखौटा परत के रूप में उपयोग की जाने वाली छवि को निर्दिष्ट करती है ।
संपत्ति निर्दिष्ट करती है कि mask-repeatमुखौटा छवि को दोहराया जाएगा या नहीं। मान इंगित करता है कि no-repeat
मुखौटा छवि दोहराई नहीं जाएगी (मुखौटा छवि केवल एक बार दिखाई जाएगी)।
एक और उदाहरण
यदि हम mask-repeatसंपत्ति को छोड़ देते हैं, तो Cinque Terre, इटली की छवि पर मुखौटा छवि दोहराई जाएगी:
उदाहरण
यहाँ स्रोत कोड है:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
ग्रेडिएंट्स को मास्क लेयर के रूप में उपयोग करें
CSS लीनियर और रेडियल ग्रेडिएंट्स का उपयोग मास्क इमेज के रूप में भी किया जा सकता है।
रैखिक ढाल उदाहरण
यहां, हम अपनी छवि के लिए मुखौटा परत के रूप में एक रैखिक-ढाल का उपयोग करते हैं। यह रैखिक ढाल ऊपर (काला) से नीचे (पारदर्शी) तक जाती है:
उदाहरण
एक मुखौटा परत के रूप में एक रैखिक ढाल का प्रयोग करें:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
यहां, हम अपनी छवि के लिए मुखौटा परत के रूप में टेक्स्ट मास्किंग के साथ एक रैखिक-ढाल का उपयोग करते हैं:
Cinque Terre इटली के उत्तर-पश्चिम में लिगुरिया के भीतर एक तटीय क्षेत्र है। यह ला स्पेज़िया प्रांत के पश्चिम में स्थित है, और इसमें पाँच गाँव शामिल हैं: मोंटेरोसो अल मारे, वर्नाज़ा, कॉर्निग्लिया, मनरोला और रिओमागिओर।
Cinque Terre इटली के उत्तर-पश्चिम में लिगुरिया के भीतर एक तटीय क्षेत्र है। यह ला स्पेज़िया प्रांत के पश्चिम में स्थित है, और इसमें पाँच गाँव शामिल हैं: मोंटेरोसो अल मारे, वर्नाज़ा, कॉर्निग्लिया, मनरोला और रिओमागिओर।
Cinque Terre इटली के उत्तर-पश्चिम में लिगुरिया के भीतर एक तटीय क्षेत्र है। यह ला स्पेज़िया प्रांत के पश्चिम में स्थित है, और इसमें पाँच गाँव शामिल हैं: मोंटेरोसो अल मारे, वर्नाज़ा, कॉर्निग्लिया, मनरोला और रिओमागिओर।
उदाहरण
मास्क लेयर के रूप में टेक्स्ट मास्किंग के साथ एक लीनियर ग्रेडिएंट का उपयोग करें:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
रेडियल ग्रेडिएंट उदाहरण
यहां, हम अपनी छवि के लिए एक रेडियल-ग्रेडिएंट (एक वृत्त के आकार का) का उपयोग मुखौटा परत के रूप में करते हैं:
उदाहरण
एक रेडियल ग्रेडिएंट का उपयोग मास्क परत (एक सर्कल) के रूप में करें:
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
यहां, हम अपनी छवि के लिए एक रेडियल-ग्रेडिएंट (एक दीर्घवृत्त के आकार का) का उपयोग मुखौटा परत के रूप में करते हैं:
उदाहरण
मुखौटा परत (एक अंडाकार) के रूप में एक और रेडियल ढाल का प्रयोग करें:
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
एसवीजी को मास्क परत के रूप में प्रयोग करें
<mask>मास्किंग प्रभाव बनाने के लिए एसवीजी तत्व का उपयोग एसवीजी ग्राफिक के अंदर किया जा सकता है।
<mask>यहां, हम अपनी छवि के लिए अलग-अलग मुखौटा परत बनाने के लिए एसवीजी तत्व का उपयोग करते हैं:
उदाहरण
एक एसवीजी मुखौटा परत (एक त्रिकोण के रूप में गठित):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
उदाहरण
एक एसवीजी मुखौटा परत (एक स्टार के रूप में गठित):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
उदाहरण
एक एसवीजी मुखौटा परत (मंडलियों के रूप में गठित):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
सीएसएस मास्किंग गुण
निम्न तालिका सभी CSS मास्किंग गुणों को सूचीबद्ध करती है:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |