मुखौटा-उत्पत्ति - सीएसएस-ट्रिक्स

mask-originएक मुखौटा परत छवि का मुखौटा स्थिति क्षेत्र निर्दिष्ट करता है। दूसरे शब्दों में, यह परिभाषित करता है कि मुखौटा परत की छवि का उद्गम स्थान है, चाहे वह सीमा के किनारे हो, पैडिंग या सामग्री बॉक्स।

.element ( mask-image: url(star.svg); mask-origin: content-box; )

एकल बॉक्स के रूप में प्रदान किए गए तत्वों के लिए, mask-originमुखौटा स्थिति क्षेत्र निर्दिष्ट करता है। कई बक्से के रूप में प्रदान किए गए तत्वों के लिए (उदाहरण के लिए, कई लाइनों पर इनलाइन बक्से, कई पृष्ठों पर बक्से) संपत्ति निर्दिष्ट करती है कि कौन से बॉक्स box-decoration-breakमुखौटा स्थिति क्षेत्र का निर्धारण करने के लिए संचालित होते हैं।

यह संपत्ति संपत्ति की तरह काम करती है background-origin, इसके अलावा इसमें अलग-अलग प्रारंभिक मूल्य और तीन अतिरिक्त मूल्य हैं जो एसवीजी तत्वों पर लागू होते हैं।

निम्नलिखित डेमो में आप मुखौटा परत छवि की उत्पत्ति को बदल सकते हैं। बेहतर मास्किंग के प्रभाव को दिखाने के लिए एक ही छवि के नीचे है और सीमा और पैडिंग क्षेत्रों को चिह्नित करता है:

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

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

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

मूल्यों

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

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

content-box: स्थिति सामग्री बॉक्स के सापेक्ष है। की उत्पत्ति mask-imageसामग्री किनारे के ऊपरी-बाएँ कोने पर स्थित है।
padding-box: स्थिति गद्दी बॉक्स के सापेक्ष है। मुखौटा छवि की उत्पत्ति 0 0पैडिंग एज के ऊपरी-बाएँ कोने पर स्थित 100% 100%है, नीचे-दाएँ कोने है।
border-box: डिफ़ॉल्ट मान, जो बॉर्डर बॉक्स के सापेक्ष स्थिति सेट करता है।
margin-box: स्थिति मार्जिन बॉक्स के सापेक्ष है
fill-box: स्थिति ऑब्जेक्ट बाउंडिंग बॉक्स के सापेक्ष है
stroke-box: स्थिति स्ट्रोक बाउंडिंग बॉक्स के सापेक्ष है
view-box: संदर्भ बॉक्स के रूप में निकटतम एसवीजी व्यूपोर्ट का उपयोग करता है। एक तो viewBoxविशेषता तत्व तो संदर्भ बॉक्स समन्वय प्रणाली द्वारा स्थापित की उत्पत्ति पर स्थित होती है बनाने व्यूपोर्ट एसवीजी के लिए निर्दिष्ट किया जाता है viewBoxविशेषता और संदर्भ बॉक्स के आयाम के लिए सेट है widthऔर heightके मूल्यों viewBoxविशेषता।
initial: संपत्ति की डिफ़ॉल्ट सेटिंग को लागू करता है, जो हैborder-box
inherit:mask-origin माता-पिता के मान को अपनाता है ।
unset:mask-origin तत्व से करंट हटाता है ।

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

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

संबद्ध सीएसएस लेआउट बॉक्स, मूल्यों के बिना एसवीजी तत्वों के लिए content-box, padding-boxऔर border-boxकरने के लिए गणना fill-box।
संबंधित सीएसएस लेआउट बॉक्स वाले तत्वों के लिए, मान fill-box, stroke-boxऔर view-boxके initialमूल्य के लिए गणना mask-originकरता है, जो है border-box।

डेमो

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

mask-originनिम्नलिखित डेमो के लिए मान बदलें कि क्या हो रहा है की एक बेहतर विचार प्राप्त करने के लिए: