CSS
क्लिपिंग और मास्किंग
खोज…
वाक्य - विन्यास
- कतरन
- क्लिप-पथ: <क्लिप-स्रोत> | [<मूल-आकृति> || <क्लिप-ज्यामिति-बॉक्स>] | कोई नहीं
- मास्किंग
- मुखौटा-छवि: [कोई नहीं | <मास्क-संदर्भ>] #
- मास्क-मोड: [<मास्क-मोड>] #
- मास्क-रिपीट: [<रिपीट-स्टाइल] #
- मुखौटा-स्थिति: [<स्थिति>] #
- मास्क-क्लिप: [<ज्यामिति-बॉक्स> | कोई क्लिप नहीं ]#
- मास्क-मूल: [<ज्यामिति-बॉक्स>] #
- मास्क-आकार: [<bg-size>] #
- मुखौटा-सम्मिश्र: [<कंपोजिंग-ऑपरेटर>] #
- मास्क: [<मास्क-संदर्भ> <मास्किंग-मोड>? || <स्थिति> [/ <bg-size>]? || <दोहराने-शैली> || <ज्यामिति-बॉक्स> || [<ज्यामिति-बॉक्स> | न-क्लिप] || <कंपोजिंग-ऑपरेटर>] #
पैरामीटर
| पैरामीटर | विवरण |
|---|---|
| क्लिप स्रोत | एक URL जो बाहरी फ़ाइल में एक SVG तत्व (या) SVG तत्व को इंगित कर सकता है जिसमें क्लिप पथ की परिभाषा शामिल है। |
| बुनियादी आकार | inset() , circle() , ellipse() या polygon() बीच एक को संदर्भित करता है। इनमें से एक फ़ंक्शन का उपयोग करके क्लिपिंग पथ को परिभाषित किया गया है। ये आकार कार्य ठीक उसी तरह से काम करते हैं जैसे वे फ्लोट्स के लिए आकार में करते हैं |
| क्लिप ज्यामिति बॉक्स | इसमें content-box , padding-box , border-box , margin-box , fill-box , stroke-box , view-box को मान के रूप में देखा जा सकता है। जब यह <आधार-आकार> के लिए बिना किसी मूल्य के प्रदान किया जाता है, तो संबंधित बॉक्स के किनारों को क्लिपिंग के लिए पथ के रूप में उपयोग किया जाता है। जब <मूलभूत-आकार> के साथ उपयोग किया जाता है, तो यह आकृति के लिए संदर्भ बॉक्स के रूप में कार्य करता है। |
| मुखौटा-संदर्भ | यह none हो सकता है या एक मुखौटा छवि स्रोत के लिए एक छवि या संदर्भ URL हो सकता है। |
| दोहराने शैली | यह निर्दिष्ट करता है कि एक्स और वाई कुल्हाड़ियों में मुखौटा को कैसे दोहराया या टाइल किया जाना चाहिए। समर्थित मान repeat-x , repeat-y , repeat , space , round , no-repeat । |
| मुखौटा मोड | alpha या luminance या auto और इंगित करता है कि मास्क को अल्फा मास्क या ल्यूमिनेंस मास्क के रूप में माना जाना चाहिए। यदि कोई मूल्य प्रदान नहीं किया गया है और मुखौटा-संदर्भ एक प्रत्यक्ष छवि है तो इसे अल्फा मास्क (या) के रूप में माना जाएगा यदि मुखौटा-संदर्भ एक URL है तो इसे ल्यूमिनेंस मास्क माना जाएगा। |
| स्थान | यह प्रत्येक मुखौटा परत की स्थिति को निर्दिष्ट करता है और background-position संपत्ति के व्यवहार के समान है। मान 1 मान सिंटैक्स (जैसे top , 10% ) या 2 मान सिंटैक्स ( top right , 50% 50% ) में प्रदान किया जा सकता है। |
| ज्यामिति बॉक्स | यह उस बॉक्स को निर्दिष्ट करता है जिस पर मास्क को क्लिप किया जाना चाहिए ( मुखौटा पेंटिंग क्षेत्र ) या वह बॉक्स जिसे संपत्ति के आधार पर मुखौटा की उत्पत्ति ( मुखौटा स्थिति क्षेत्र ) के संदर्भ के रूप में उपयोग किया जाना चाहिए। संभावित मूल्यों की सूची content-box , padding-box , border-box , margin-box , fill-box , stroke-box , view-box । उन मूल्यों में से प्रत्येक कैसे काम करता है, इसका विस्तृत विवरण W3C कल्पना में उपलब्ध है। |
| bg-आकार | यह प्रत्येक मुखौटा-छवि परत के आकार का प्रतिनिधित्व करता है और background-size के समान सिंटैक्स है। मान लंबाई या प्रतिशत या ऑटो या कवर या हो सकता है। लंबाई, प्रतिशत और ऑटो या तो एक मूल्य के रूप में या प्रत्येक अक्ष के लिए एक के रूप में प्रदान किया जा सकता है। |
| संयोजन-ऑपरेटर | यह add , subtract , exclude , प्रति परत को multiply और कंपोजिटिंग ऑपरेशन के प्रकार को परिभाषित करता है, जो इस परत के लिए इस्तेमाल किया जाना चाहिए। W3C चश्मा में प्रत्येक मूल्य के बारे में विस्तृत विवरण उपलब्ध है। |
टिप्पणियों
CSS क्लिपिंग और मास्किंग बहुत नई अवधारणाएं हैं और इसलिए इन गुणों के लिए ब्राउज़र का समर्थन बहुत कम है।
मास्क:
लेखन के समय (जुलाई '16), क्रोम, सफारी और ओपेरा इन गुणों का समर्थन करते हैं -webkit- उपसर्ग के साथ।
फ़ायरफ़ॉक्स को उपसर्गों की आवश्यकता नहीं है, लेकिन यह केवल एसवीजी mask तत्वों के साथ उपयोग किए जाने पर मास्क का समर्थन करता है। इनलाइन SVG mask तत्वों के लिए, वाक्यविन्यास mask: url(#msk) जबकि बाहरी SVG फ़ाइल में mask तत्वों का उपयोग करने के लिए वाक्यविन्यास mask: url('yourfilepath/yourfilename.svg#msk') । #msk दोनों मामलों में संदर्भित किए जाने वाले mask तत्व की id को संदर्भित करता है। जैसा कि इस उत्तर में संकेत दिया गया है, वर्तमान में फ़ायरफ़ॉक्स mask संपत्ति में mask-reference अलावा किसी भी पैरामीटर का समर्थन नहीं करता है।
इंटरनेट एक्सप्लोरर (एज) इस संपत्ति के लिए अभी तक कोई समर्थन प्रदान नहीं करता है।
mask-mode संपत्ति वर्तमान में उपसर्गों के साथ या बिना किसी भी ब्राउज़र द्वारा समर्थित नहीं है।
क्लिप-पथ:
जब लेखन (Jul '16) क्रोम, सफारी और ओपेरा clip-path का समर्थन करता है, जब इनलाइन SVG के साथ मूल आकृतियों (जैसे circle , polygon ) या url(#clipper) सिंटैक्स का उपयोग करके पथ बनाया जाता है। वे बाहरी एसवीजी फ़ाइलों का हिस्सा आकार के आधार पर कतरन का समर्थन नहीं करते हैं। इसके अलावा, उन्हें उपस्थित होने के लिए -webkit उपसर्ग की आवश्यकता होती है।
फ़ायरफ़ॉक्स केवल clip-path लिए url() सिंटैक्स का समर्थन करता है जबकि इंटरनेट एक्सप्लोरर (और एज) कोई समर्थन प्रदान नहीं करता है।
कतरन (बहुभुज)
सीएसएस:
div{
width:200px;
height:200px;
background:teal;
clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}
HTML:
<div></div>
उपरोक्त उदाहरण में, एक बहुभुज क्लिपिंग पथ का उपयोग वर्ग (200 x 200) तत्व को त्रिकोण आकार में क्लिप करने के लिए किया जाता है। आउटपुट आकार एक त्रिभुज है क्योंकि पथ पर शुरू होता है (अर्थात, पहले निर्देशांक हैं) 0 0 - जो बॉक्स के ऊपरी-बाएँ कोने में है, फिर 0 100% जाता है - जो बॉक्स के निचले-बाएँ कोने है और फिर अंत में 100% 50% जो बॉक्स के दाएं-मध्य बिंदु के अलावा कुछ भी नहीं है। ये रास्ते स्वयं समापन हैं (यानी, शुरुआती बिंदु अंतिम बिंदु होगा) और इसलिए अंतिम आकार त्रिकोण का है।
यह भी एक छवि या पृष्ठभूमि के रूप में एक ढाल के साथ एक तत्व पर इस्तेमाल किया जा सकता है।
आउटपुट:
क्लिपिंग (सर्कल)
सीएसएस:
div{
width: 200px;
height: 200px;
background: teal;
clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}
एचटीएमएल
<div></div>
यह उदाहरण दिखाता है कि किसी मंडली में div को कैसे क्लिप किया जाए। तत्व को एक सर्कल में क्लिप किया गया है, जिसका त्रिज्या संदर्भ बॉक्स के केंद्र में उसके केंद्र बिंदु के साथ संदर्भ बॉक्स के आयामों के आधार पर 30% है। यहां चूंकि कोई <क्लिप-ज्यामिति-बॉक्स> (दूसरे शब्दों में, संदर्भ बॉक्स) प्रदान नहीं किया गया है, इसलिए तत्व के border-box को संदर्भ बॉक्स के रूप में उपयोग किया जाएगा।
वृत्त की आकृति का त्रिज्या और केंद्र होना आवश्यक है (x,y) निर्देशांक:
circle(radius at x y)
आउटपुट:
कतरन और मास्किंग: अवलोकन और अंतर
क्लिपिंग और मास्किंग से आप तत्वों के कुछ निर्दिष्ट भागों को पारदर्शी या अपारदर्शी बना सकते हैं। दोनों को किसी भी HTML तत्व पर लागू किया जा सकता है।
कतरन
क्लिप वेक्टर पथ हैं। इस पथ के बाहर तत्व पारदर्शी होगा, अंदर यह अपारदर्शी है। इसलिए आप तत्वों पर एक clip-path संपत्ति को परिभाषित कर सकते हैं। प्रत्येक ग्राफिकल तत्व जो एसवीजी में भी मौजूद है आप पथ को परिभाषित करने के लिए एक फ़ंक्शन के रूप में यहां उपयोग कर सकते हैं। उदाहरण circle() , polygon() या ellipse() ।
clip-path: circle(100px at center);
तत्व केवल इस सर्कल के अंदर दिखाई देगा, जो तत्व के केंद्र में स्थित है और जिसकी त्रिज्या 100px है।
मास्किंग
मास्क क्लिप के समान हैं, लेकिन एक पथ को परिभाषित करने के बजाय आप एक मुखौटा को परिभाषित करते हैं जो तत्व पर परतें हैं। आप इस मुखौटे की कल्पना एक छवि के रूप में कर सकते हैं जिसमें मुख्य रूप से दो रंग शामिल हैं: काले और सफेद।
ल्यूमिनेंस मास्क : ब्लैक का मतलब है कि क्षेत्र अपारदर्शी है, और सफेद है जो पारदर्शी है, लेकिन एक ग्रे क्षेत्र भी है जो अर्ध-पारदर्शी है, इसलिए आप चिकनी बदलाव करने में सक्षम हैं।
अल्फा मास्क : केवल मास्क के पारदर्शी क्षेत्रों पर तत्व अपारदर्शी होगा।
उदाहरण के लिए इस छवि का उपयोग एक ल्यूमिनेंस मास्क के रूप में किया जा सकता है, जो तत्व के लिए एक बहुत ही चिकनी संक्रमण से दाएं से बाएं और अपारदर्शी से पारदर्शी तक हो सकता है।
mask संपत्ति आपको मुखौटा प्रकार और एक छवि को परत के रूप में उपयोग करने के लिए निर्दिष्ट करती है।
mask: url(masks.svg#rectangle) luminance;
एक तत्व जिसे rectangle कहा जाता है masks.svg में परिभाषित किया गया है। masks.svg का उपयोग तत्व पर एक ल्यूमिनेंस मास्क के रूप में किया जाएगा।
साधारण मुखौटा जो एक छवि को ठोस से पारदर्शी बनाता है
सीएसएस
div {
height: 200px;
width: 200px;
background: url(http://lorempixel.com/200/200/nature/1);
mask-image: linear-gradient(to right, white, transparent);
}
एचटीएमएल
<div></div>
ऊपर के उदाहरण में एक तत्व है जिसकी पृष्ठभूमि के रूप में एक छवि है। छवि (सीएसएस का उपयोग करके) पर लगाया जाने वाला मुखौटा ऐसा दिखता है जैसे कि यह बाएं से दाएं बाहर लुप्त हो रहा है।
मास्किंग एक linear-gradient का उपयोग करके प्राप्त किया जाता है जो सफेद (बाईं तरफ) से पारदर्शी (दाएं पर) मुखौटा के रूप में जाता है। जैसा कि यह एक अल्फा मास्क है, छवि पारदर्शी हो जाती है जहां मुखौटा पारदर्शी होता है।
मुखौटा के बिना आउटपुट:
मुखौटा के साथ आउटपुट:
नोट: जैसा कि टिप्पणी में उल्लेख किया गया है, उपरोक्त उदाहरण क्रोम, सफारी और ओपेरा में तभी काम करेगा जब -webkit उपसर्ग के साथ उपयोग किया जाए। यह उदाहरण (मास्क छवि के रूप में linear-gradient साथ) फ़ायरफ़ॉक्स में अभी तक समर्थित नहीं है।
एक छवि के बीच में एक छेद काटने के लिए मास्क का उपयोग करना
सीएसएस
div {
width: 200px;
height: 200px;
background: url(http://lorempixel.com/200/200/abstract/6);
mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}
एचटीएमएल
उपर्युक्त उदाहरण में, radial-gradient का उपयोग करके केंद्र में एक पारदर्शी सर्कल बनाया जाता है और फिर इसे किसी छवि के केंद्र से काटे जा रहे सर्कल के प्रभाव को उत्पन्न करने के लिए मास्क के रूप में उपयोग किया जाता है।
मुखौटा के बिना छवि:
मुखौटा के साथ छवि:
अनियमित आकृतियों के साथ चित्र बनाने के लिए मास्क का उपयोग करना
सीएसएस
div { /* check remarks before usage */
height: 200px;
width: 400px;
background-image: url(http://lorempixel.com/400/200/nature/4);
mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
mask-size: 75% 25%, 25% 25%, 100% 75%;
mask-position: bottom left, bottom right, top left;
mask-repeat: no-repeat;
}
एचटीएमएल
<div></div>
उपरोक्त उदाहरण में, तीन linear-gradient इमेज (जो उनके उपयुक्त पदों पर रखे जाने पर कंटेनर के आकार का 100% x 100% होता है) का उपयोग छवि के निचले भाग में पारदर्शी त्रिकोणीय आकार के कट को बनाने के लिए मास्क के रूप में किया जाता है।
मुखौटा के बिना छवि:
मुखौटा के साथ छवि:
