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

Anonim

CSS में, mask-positionसंपत्ति मुखौटा स्थिति क्षेत्र के सापेक्ष मुखौटा परत छवि की प्रारंभिक स्थिति को निर्दिष्ट करती है। यह background-positionसंपत्ति की तरह काम करता है ।

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

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

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

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • प्रारंभिक मूल्य: 0% 0%
  • सभी तत्वों पर लागू होता है । एसवीजी में, यह तत्व, सभी ग्राफिक तत्वों और तत्व को छोड़कर कंटेनर तत्वों पर लागू होता है ।
  • इन्हेरिट किया: नहीं
  • संगणित मूल्य: इसमें शामिल हैं: मूल से प्रतिनिधित्व करने वाले दो कीवर्ड और उस मूल से दो ऑफ़सेट, प्रत्येक को पूर्ण लंबाई (यदि दिया गया है ) के रूप में, अन्यथा प्रतिशत के रूप में।
  • एनीमेशन प्रकार: दोहराने योग्य सूची

मूल्यों

एक ऑफसेट कीवर्ड के संदर्भ में निर्दिष्ट किया जा सकता है ( top, left, bottom, right, और center), प्रतिशत, और लंबाई तत्व, सीएसएस के लिए इसी तरह के किनारों के बारे में मान background-positionसंपत्ति।

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

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

  • : कोई भी मान्य सीएसएस लंबाई (जैसे px, em, remऔर %दूसरों के बीच में,) जो कितनी दूर मुखौटा छवि के किनारे तत्व की इसी किनारे से है निर्दिष्ट करेगा।
  • : मुखौटा की छवि क्षेत्र की स्थिति मुखौटा छवि के शून्य से कम आकार के सापेक्ष मुखौटा परत छवि की स्थिति को निर्दिष्ट करती है।
  • top: ऊर्ध्वाधर स्थिति के लिए 0% के बराबर।
  • right: क्षैतिज स्थिति के लिए 100% के बराबर।
  • bottom: ऊर्ध्वाधर स्थिति के लिए 100% के बराबर।
  • left: क्षैतिज स्थिति के लिए 0% के बराबर।
  • center: यदि क्षैतिज स्थिति अन्यथा निर्दिष्ट नहीं है, या ऊर्ध्वाधर स्थिति के लिए 50% है, तो क्षैतिज स्थिति के लिए 50% के बराबर है।
  • initial: संपत्ति की डिफ़ॉल्ट सेटिंग को लागू करता है, जो 0% 0% है।
  • inherit:mask-position माता-पिता के मान को अपनाता है ।
  • unset:mask-position तत्व से करंट हटाता है ।

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

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

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

अलग-अलग वाक्य-विन्यास

mask-position क्षैतिज और लंबवत रूप से मुखौटा परत की स्थिति को निर्दिष्ट करने के लिए एक, दो, तीन या चार मान ले सकते हैं।

एकल मूल्य

यदि कोई एकल मान सेट किया जाता है, तो इसे क्षैतिज मान के रूप में लिया जाता है और ऊर्ध्वाधर मान लिया जाता है center।

mask-position: 100px; /* 100px center */
दो मूल्य

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

mask-position: 10% 50%; /* x=10%, Y=50% */

यदि दोनों मान कीवर्ड हैं, तो कीवर्ड का क्रम अप्रासंगिक है:

mask-position: top left; /* = left top */

लेकिन जब हमारे पास कीवर्ड और लंबाई या प्रतिशत का संयोजन होता है, तो ऑर्डर मायने रखता है और पहला मूल्य हमेशा क्षैतिज ऑफसेट से मेल खाता है। इसलिए:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
तीन मूल्य

यदि तीन मान दिए जाते हैं, तो अनुपलब्ध ऑफ़सेट शून्य माना जाता है:

mask-position: left 100px bottom; /* left=100px bottom=0 */
चार मूल्य

एक चार-मूल्य सिंटैक्स आपको यह निर्दिष्ट करने की अनुमति देता है कि आप तत्व के किन पक्षों को मुखौटा (1 और 3) के सापेक्ष स्थित कर रहे हैं, और फिर उन पक्षों से दूरी (मान 2 और 4)।

इसलिए, यदि आप तत्व के नीचे से मास्क को 100px और दाईं ओर से 200px की स्थिति में रखना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

mask-position: bottom 100px right 200px;

एनिमेटेड मास्क

मास्क-पोजीशन को चेतन करना और mask-sizeनिम्नलिखित की तरह कीफ़्रेम एनीमेशन और सीएसएस ट्रांस्फ़ॉर्मिंग का उपयोग करना संभव है :

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

इस अगले डेमो में, हम कीफ्रेम एनीमेशन का उपयोग करके मुखौटा परत की स्थिति को एनिमेट कर रहे हैं:

डेमो

mask-positionनिम्नलिखित डेमो के लिए मान बदलें :

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

अर्थात एज फ़ायर्फ़ॉक्स क्रोम सफारी ओपेरा
नहीं न 18+ 53+ है 4+ ३.२+ 15+
Android क्रोम Android फ़ायरफ़ॉक्स Android ब्राउज़र iOS सफारी ओपेरा मोबाइल
85+ 79+ २.१+ ३.२+ 59+ है
स्रोत: कैनुएज़

अधिक जानकारी

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