मास्क-क्लिप - सीएसएस-ट्रिक्स

Anonim

mask-clipसीएसएस संपत्ति सीएसएस मास्किंग मॉड्यूल स्तर 1 विनिर्देश का हिस्सा है, और मुखौटा पेंटिंग क्षेत्र निर्धारित करता है। यह सचमुच एक तत्व की पृष्ठभूमि क्षेत्र को क्लिप करता है और परिभाषित करता है कि कौन से क्षेत्र मुखौटा के माध्यम से दिखाते हैं: सीमा, पैडिंग या सामग्री बॉक्स। यह एक तस्वीर पर फ्रेम लगाने की तरह है, फोटो के केवल उन हिस्सों को दिखा रहा है जो फ्रेम द्वारा कवर नहीं किए गए हैं। केवल, इस मामले में, हम सेट कर रहे हैं कि सीएसएस बॉक्स मॉडल मूल्यों का उपयोग करके क्या क्लिप हो जाता है।

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

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

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

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • प्रारंभिक मूल्य: border-box
  • सभी तत्वों पर लागू होता है । एसवीजी में, यह तत्व, सभी ग्राफिक्स तत्वों को छोड़कर कंटेनर तत्वों पर लागू होता है ।
  • इन्हेरिट किया: नहीं
  • एनिमेशन प्रकार: असतत

मूल्यों

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: चित्रित सामग्री को बॉर्डर बॉक्स पर क्लिप किया गया है। (डिफ़ॉल्ट मान)
  • content-box: पेंट की गई सामग्री को कंटेंट बॉक्स में क्लिप किया जाता है।
  • fill-box: चित्रित सामग्री को ऑब्जेक्ट बाउंडिंग बॉक्स पर क्लिप किया गया है।
  • margin-box: चित्रित सामग्री को मार्जिन बॉक्स पर क्लिप किया गया है।
  • padding-box: चित्रित सामग्री को पैडिंग बॉक्स पर क्लिप किया गया है।
  • stroke-box: पेंट की गई सामग्री को स्ट्रोक बाउंडिंग बॉक्स पर क्लिप किया जाता है।
  • view-box: संदर्भ बॉक्स के रूप में निकटतम एसवीजी व्यूपोर्ट का उपयोग करता है। यदि viewBoxSVG व्यूपोर्ट बनाने वाले तत्व के लिए एक विशेषता निर्दिष्ट की जाती है:
    • संदर्भ बॉक्स viewBoxविशेषता द्वारा स्थापित समन्वय प्रणाली के मूल में स्थित है ।
    • संदर्भ बॉक्स का आयाम विशेषता के मानों widthऔर heightमानों पर सेट है viewBox।
  • no-clip: चित्रित सामग्री को क्लिप नहीं किया गया है।
  • initial: संपत्ति की डिफ़ॉल्ट सेटिंग को लागू करता है, जो है border-box।
  • inherit:mask-clip माता-पिता के मान को अपनाता है ।
  • unset:mask-clip तत्व से करंट हटाता है ।

टिप्पणियाँ

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

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

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

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

डेमो

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

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

अधिक जानकारी

6 नवंबर 2016 को अनुच्छेद

CSS में क्लिपिंग और मास्किंग

मोजतबा सीयदी