मास्क-मोड - सीएसएस-ट्रिक्स

mask-modeसीएसएस संपत्ति को इंगित करता है सीएसएस मुखौटा परत छवि एक अल्फा मुखौटा या एक चमक मुखौटा के रूप में इलाज किया गया है।

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

वाक्य - विन्यास

mask-mode: alpha | luminance | match-source

संपत्ति एक कीवर्ड मूल्य, या दोनों के अल्पविराम द्वारा पृथक सूची या तीनों को स्वीकार करता है alpha, luminanceऔर mask-sourceमूल्यों।

प्रारंभिक मूल्य: match-source
सभी तत्वों पर लागू होता है । एसवीजी में, यह तत्व, सभी ग्राफिक्स तत्वों को छोड़कर कंटेनर तत्वों पर लागू होता है।
इन्हेरिट किया: नहीं
कंप्यूटेड वैल्यू: जैसा कि निर्दिष्ट है
एनिमेशन प्रकार: असतत

मूल्यों

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: निर्दिष्ट करता है कि मुखौटा परत छवि के अल्फा मान (अल्फा चैनल) का उपयोग मुखौटा मूल्यों के रूप में किया जाना चाहिए।
luminance: निर्दिष्ट करता है कि मुखौटा छवि के ल्यूमिनेंस मानों का उपयोग मास्क मूल्यों के रूप में किया जाना चाहिए।
match-source: डिफ़ॉल्ट मान, जो मुखौटा मोड को अल्फा पर सेट करता है यदि mask-imageसंपत्ति का मुखौटा संदर्भ छवि URL या ग्रेडिएंट जैसा सीएसएस तत्व है। हालांकि, यदि mask-imageसंपत्ति का मुखौटा संदर्भ एक एसवीजी तत्व है, तो संदर्भित तत्व के मुखौटा-प्रकार की संपत्ति द्वारा निर्दिष्ट मूल्य का उपयोग किया जाना चाहिए।
initial: संपत्ति की डिफ़ॉल्ट सेटिंग लागू करता है, जो है match-source।
inherit: माता-पिता के मुखौटा-मोड मूल्य को गोद ले।
unset: तत्व से वर्तमान मास्क-मोड को हटाता है।

कई मूल्यों का उपयोग करना

यह संपत्ति मुखौटा मोड के लिए मानों की अल्पविराम से अलग की गई सूची ले सकती है और प्रत्येक मूल्य को मुखौटा-छवि संपत्ति में निर्दिष्ट संबंधित मुखौटा परत छवि पर लागू किया जाता है।

निम्नलिखित उदाहरण में, पहला मान मास्क मोड को पहली छवि के अनुसार, दूसरी छवि के लिए दूसरा मान और इसी तरह निर्दिष्ट करता है।

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

अल्फा और ल्यूमिनेन्स मास्क

सीएसएस में मास्किंग दो तरीकों के साथ आता है जिसमें मुखौटा मूल्यों की गणना में कुछ अंतर होते हैं।

अल्फा मास्क

चित्र पिक्सेल से बने होते हैं, प्रत्येक पिक्सेल में कुछ डेटा होते हैं जिनमें रंग मूल्य और शायद पारदर्शिता जानकारी के साथ अल्फा मान होते हैं। अल्फा चैनल के साथ एक छवि एक अल्फा मास्क हो सकती है , जैसे कि पीएनजी चित्र काले और पारदर्शी क्षेत्रों के साथ।

एक साधारण मास्किंग ऑपरेशन में, हमारे पास एक तत्व और एक मुखौटा छवि है जो इसके शीर्ष पर रखी गई है। मुखौटा छवि में प्रत्येक पिक्सेल का अल्फा मान तत्व में इसके संबंधित पिक्सेल के साथ विलय कर दिया जाएगा।

यदि अल्फा मान शून्य (यानी पारदर्शी) है, तो यह जीतता है और तत्व का वह भाग नकाबपोश (यानी छिपा हुआ) होता है।
एक का एक अल्फा मान (यानी पूरी तरह से अपारदर्शी) तत्व के उस पिक्सेल को दिखाई देने की अनुमति देता है।
0 और 1 (जैसे 0.5) के बीच का मान पिक्सेल को दृश्यमान करने की अनुमति देता है लेकिन एक निश्चित स्तर की पारदर्शिता के साथ।

तो, इस विधि में, किसी दिए गए बिंदु पर मास्क का मान, मास्क छवि के उस बिंदु पर अल्फा चैनल का मूल्य है और रंगीन चैनल मास्क के मूल्य में योगदान नहीं करते हैं।

उदाहरण bellow एक अल्फा मास्क है जिसमें केवल काला (1 का अल्फा मान) और पारदर्शी क्षेत्र (0 का अल्फा मान) होता है और आप परिणाम देख सकते हैं जिसमें कुछ भाग पूरी तरह से दिखाई देते हैं और अन्य पूरी तरह से पारदर्शी होते हैं:

मुखौटा छवि के रूप में अल्फा चैनल के साथ पीएनजी का उपयोग करना

लेकिन निम्नलिखित उदाहरण में, हम एक ढाल का उपयोग कर रहे हैं जिसमें विभिन्न स्तर की पारदर्शिता है। परिणाम केवल दृश्यमान या पारदर्शी नहीं है, लेकिन कुछ पारभासी क्षेत्र हैं:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

और यहाँ ब्राउज़र में परिणाम कैसा दिखता है:

मुखौटा छवि के रूप में एक रैखिक ढाल का उपयोग करना

प्रकाश मास्क

एक ल्यूमिनेंस मास्क में, रंग और अल्फा मान मायने रखते हैं। जब अल्फा मान 0 (यानी पूरी तरह से पारदर्शी) है, तो तत्व छिपा हुआ है; जब अल्फा वैल्यू 1 होती है, तो मास्क का मान उस पिक्सेल के कलर चैनल के आधार पर भिन्न होता है। उदाहरण के लिए, जब रंग सफेद होता है, तो तत्व दिखाई देता है; काले क्षेत्र के मामले में, तत्व छिपा हुआ है।

एक अल्फा मास्क में मुखौटा मूल्यों की गणना करते समय केवल मुखौटा छवि के अल्फा मूल्यों पर आधारित होता है, एक ल्यूमिनेंस मास्क के मुखौटा मूल्यों को ल्यूमिनेंस और अल्फा मूल्यों से गणना की जाती है। ब्राउज़र निम्न चरणों में ऐसा करते हैं:

रंग चैनल मान से एक luminance मान की गणना करें।
मुखौटा मूल्य का उत्पादन करने के लिए संबंधित अल्फा मूल्य द्वारा गणना किए गए ल्यूमिनेंस मूल्य को गुणा करें।

/ स्पष्टीकरण इन गणनाओं के बारे में अधिक जानकारी के लिए आप सितंबर 2019 के संपादक के ड्राफ्ट से सीएसएस मास्किंग मॉड्यूल 1 विनिर्देशन में मुखौटा प्रसंस्करण अनुभाग की जांच कर सकते हैं।

Bellow केंद्र और उसके आस-पास के पारदर्शी क्षेत्रों में सफेद सूरज के साथ एक मुखौटा छवि है। जैसा कि आप देख सकते हैं, जबकि क्षेत्र पूरी तरह से दिखाई दे रहे हैं:

एक अल्फा चैनल के साथ एक PNG छवि और एक मुखौटा छवि के रूप में सफेद क्षेत्रों का उपयोग करना

और अगले उदाहरण में, एक रंगीन ढाल का उपयोग मुखौटा छवि के रूप में किया जाता है और आप ल्यूमिनेन्स मोड में मास्क मूल्यों पर विभिन्न रंगों के प्रभाव को देख सकते हैं: