मुखौटा-आकार - सीएसएस-ट्रिक्स

CSS में, मुखौटा-आकार की संपत्ति एक मुखौटा परत छवि के आकार को निर्दिष्ट करती है। कई मायनों में, यह background-sizeसंपत्ति की तरह बहुत काम करता है।

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

मास्किंग आपको बाकी को छिपाने के दौरान एक तत्व के चयनित भागों को प्रदर्शित करने की अनुमति देता है। मुखौटा का आकार mask-sizeसंपत्ति द्वारा परिभाषित किया गया है।

निम्नलिखित डेमो में आप मास्क लेयर इमेज के आकार के साथ खेल सकते हैं:

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

mask-size: = ( = | | auto )(1,2) | cover | contain

• प्रारंभिक मूल्य: ऑटो
• इस पर लागू होता है: सभी तत्व। एसवीजी में, यह छोड़कर कंटेनर तत्वों पर लागू होता है तत्व, सभी ग्राफिक्स तत्वों और तत्व
• इन्हेरिट किया: नहीं
• एनीमेशन प्रकार: दोहराने योग्य सूची

यह मूल रूप से कह रहा है कि वाक्यविन्यास एक पृष्ठभूमि आकार ( ) मान को स्वीकार करता है जो या तो एक या दो लंबाई और / या प्रतिशत ( ), autoदो कीवर्ड ( coverऔर contain) में से एक में सेट हो सकता है ।

• जब दो मानों का उपयोग किया जाता है, तो पहला मान मुखौटा छवि की चौड़ाई को निर्दिष्ट करता है , और दूसरा मान इसकी ऊंचाई को निर्दिष्ट करता है ।
• जब एक मान जिसमें कवर या कवर नहीं है, का उपयोग किया जाता है, तो यह मुखौटा छवि की चौड़ाई को परिभाषित करता है और ऊंचाई मान ली जाती है auto।

मूल्यों

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

मूल्य परिभाषाएँ

• : कोई भी मान्य और गैर नकारात्मक सीएसएस लंबाई, जैसे px, em, remऔर %दूसरों के बीच।
• : मुखौटा स्थिति क्षेत्र के सापेक्ष प्रतिशत मान के रूप में मुखौटा परत छवि के आकार को निर्दिष्ट करता है, जिसके मूल्य द्वारा निर्धारित किया जाता है mask-origin। डिफ़ॉल्ट रूप से, यह मान है border-box, जिसका अर्थ है कि इसमें बॉक्स की सीमाएं, पैडिंग और सामग्री शामिल है।
• auto: मुखौटा छवि की आंतरिक ऊंचाई और चौड़ाई का उपयोग किया जाता है और, ग्रेडिएंट जैसी छवियों के लिए, जिसमें आंतरिक आयाम नहीं होते हैं, इसे मुखौटा स्थिति क्षेत्र के आकार में प्रदान किया जाता है।
• contain: मुखौटा छवि को अपने आंतरिक अनुपात को इस तरह से संरक्षित करते हुए मापता है कि इसकी चौड़ाई और इसकी ऊंचाई दोनों मास्क पोजिशनिंग क्षेत्र के अंदर फिट हो सकते हैं। ग्रेडिएंट्स जैसी छवियों के लिए आंतरिक आयाम नहीं हैं, यह मुखौटा स्थिति क्षेत्र के आकार में प्रदान किया गया है।
• cover: मुखौटा छवि को अपने आंतरिक अनुपात को इस तरह से संरक्षित करते हुए मापता है कि इसकी चौड़ाई और इसकी ऊंचाई दोनों पूरी तरह से मुखौटा स्थिति क्षेत्र को कवर कर सकते हैं। ग्रेडिएंट्स जैसी छवियों के लिए आंतरिक आयाम नहीं हैं, यह मुखौटा स्थिति क्षेत्र के आकार में प्रदान किया गया है।
• initial: संपत्ति की डिफ़ॉल्ट सेटिंग को लागू करता है, जो है auto।
• inherit: माता-पिता के मुखौटा-आकार के मूल्य को गोद ले।
• unset:mask-size तत्व से करंट हटाता है ।

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

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

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

autoमूल्य

यदि mask-sizeसंपत्ति का मूल्य autoइस प्रकार निर्दिष्ट किया गया है :

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

... तो मुखौटा छवि अपने पहलू अनुपात को बनाए रखने के लिए इसी दिशा में तराजू। उन्होंने कहा, हम छवि के आंतरिक आयाम और अनुपात के आधार पर विभिन्न परिणाम प्राप्त कर सकते हैं।

आनुपातिक / आयाम	कोई आंतरिक आयाम नहीं	एक आंतरिक आयाम	दोनों आंतरिक आयाम
आनुपातिक है	इसके बजाय निर्दिष्ट किया गया था जैसे शामिल थे	उस एक आयाम और अनुपात द्वारा निर्धारित आकार पर निर्भर	उस आकार पर भरोसा किया
कोई अनुपात नहीं	मास्क पोजिशनिंग क्षेत्र के आकार पर निर्भर	आंतरिक आयाम और मुखौटा स्थिति क्षेत्र के संगत आयाम का उपयोग करके रेंडर किया गया	एन / ए

यदि निम्न के mask-sizeसाथ autoएक और गैर-ऑटो मान निर्दिष्ट किया गया है:

.element ( mask-size: auto 200px; )

… तब फिर:

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

समझ coverऔरcontain

निम्न वीडियो बताता है कि कैसे शामिल हैं और कीवर्ड काम करते हैं। ध्यान दें कि मास्किंग परत की प्रारंभिक स्थिति स्थिति क्षेत्र के केंद्र में है:

यदि छवि में कोई आंतरिक पहलू अनुपात नहीं है, तो या तो कवर को निर्दिष्ट करना या मुखौटा स्थिति क्षेत्र के आकार में मुखौटा छवि प्रदान करना शामिल है।

और अभी क्या बिल्ली एक आंतरिक आयाम और आंतरिक अनुपात है?

आंतरिक आयाम एक तत्व की चौड़ाई और ऊंचाई हैं और आंतरिक अनुपात उनमें से अनुपात है।

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

ब्राउज़र का समर्थन

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	18+	53+ है	सब	4+	70

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ऑपेरा मिनी
85+	79+	4.4+ है	सब	सब

डेमो

निम्नलिखित डेमो मास्क-आकार के लिए एक लंबाई का उपयोग करता है। कोड में अन्य प्रकार के मानों को बदलने का प्रयास करें और परिणाम की जांच करें।

अधिक जानकारी

• सीएसएस मास्किंग मॉड्यूल स्तर 1
• CSS में क्लिपिंग और मास्किंग
• क्लिपिंग बनाम मास्किंग: प्रत्येक का उपयोग कब करें
• # 185: सीएसएस मास्क के साथ खेलना (वीडियो)