लोड हो रहा है...

CSS मास्किंग

Optional Advanced ने अभी अखबारी कॉलम भरे। यह सत्र दूसरा वैकल्पिक औज़ार है: मास्क। आप एक बॉक्स पर स्टेंसिल रखते हैं। जहाँ स्टेंसिल ठोस है, फोटो या रंग दिखता है। जहाँ खाली है, वही बॉक्स गायब हो जाता है। आप लेख को धाराओं में नहीं काटते, और स्प्राइट शीट पर आइकन टाइल भी नहीं खिसकाते।

सीधा जवाब

CSS मास्किंग तत्व के हिस्से mask-image से छिपाती है — PNG, SVG, या ग्रेडिएंट। कटे हुए साँचे से स्प्रे पेंट सोचें। mask-size, mask-repeat, और mask-position बैकग्राउंड परत जैसे चलते हैं: cover, no-repeat, center। mask-mode चुनता है अल्फा (मास्क फ़ाइल की पारदर्शिता) या ल्यूमिनेंस (हल्का बनाम गहरा)। किनारा फेड होना चाहिए तो मास्क। कठोर वृत्त या बहुभुज चाहिए तो clip-path। लेबल और बटन पूरी तरह दिखते रहें।

मास्क कॉलम या स्प्राइट क्यों नहीं

मल्टी-कॉलम एक टेक्स्ट धारा को टुकड़े करता है। स्प्राइट शीट background-position से एक बिटमैप काटती है ताकि कई आइकन एक फ़ाइल बाँटें। मास्क दोनों नहीं करता। तत्व अपना बॉक्स रखता है। लेआउट चौड़ाई-ऊँचाई नहीं सिकुड़ती। बदलता सिर्फ़ यह है कि उस बॉक्स के कौन से पिक्सेल पेंट हों। फ़िल्टर (blur(), grayscale()) दिखते पिक्सेल का रूप बदलते हैं; मास्क तय करता है कौन से रहें।

स्टेंसिल के रूप में PNG

mask-image url(...) लेता है जैसे background-image। आम मास्क PNG वहाँ सफ़ेद (या अपारदर्शी) है जहाँ फोटो चाहिए, और जहाँ छेद चाहिए वहाँ पारदर्शी:

PNG mask with mask-image

css

.hero-photo {
width: 20rem;
height: 12rem;
background: url("/img/studio.jpg") center / cover no-repeat;
mask-image: url("/img/soft-blob.png");
mask-size: cover;
mask-repeat: no-repeat;
}

फोटो अभी भी बैकग्राउंड है (या उसी मास्क वाला <img>)। ब्लॉब PNG केवल स्टेंसिल है। मास्क फ़ाइल गायब हो तो पूरा तत्व गायब हो सकता है — बिना मास्क वाला फ़ॉलबैक रखें, या URL जाँचें।

ग्रेडिएंट से फेड

दूसरी इमेज फ़ाइल ज़रूरी नहीं। ग्रेडिएंट मास्क कार्ड के नीचे वाला रोज का फेड है:

Fade with a gradient mask

css

.card-lead {
mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-repeat: no-repeat;
}

काला (या पूरी अपारदर्शिता) सामग्री रखता है; transparent छेद करता है। ग्रेडिएंट CSS में रहता है, इसलिए अतिरिक्त HTTP नहीं — आइकन स्प्राइट शीट के विपरीत। यह पूरे कार्ड पर opacity नहीं: ठोस हिस्से का टेक्स्ट तेज रहता है; सिर्फ़ मास्क वाला क्षेत्र घुलता है।

आकार, repeat, स्थिति

मास्क को ऐसी बैकग्राउंड परत समझें जिसे आप तस्वीर की तरह नहीं देखते:

Size, repeat, and position

css

.badge {
mask-image: url("/img/star-mask.svg");
mask-size: 4rem 4rem;
mask-repeat: no-repeat;
mask-position: center;
}

mask-size: cover बॉक्स भरता है; contain स्टेंसिल का अनुपात रखता है; लंबाइयाँ छोटी आकृति पिन करती हैं। repeat स्टेंसिल टाइल करता है (कम, और जल्दी ज्यादा)। शॉर्टहैंड mask है, पर जब तक परत background जैसी न लगे longhand शांत रहते हैं।

अल्फा बनाम ल्यूमिनेंस

mask-mode पूछता है: «पारदर्शिता पढ़ूँ या चमक?»

Luminance mask-mode on a photo

css

.portrait {
mask-image: url("/img/gray-sculpt.jpg");
mask-mode: luminance;
mask-size: cover;
}

alpha (पारदर्शी PNG पर अक्सर डिफ़ॉल्ट) अल्फा चैनल पढ़ता है। luminance हल्का-गहरा: सफ़ेद आमतौर पर दिखाता है, काला छिपाता है — जब स्टेंसिल ग्रे फोटो हो, पारदर्शी PNG नहीं। JPEG मास्क «कुछ न करे» तो शायद luminance चाहिए था। SVG <mask> पर mask-type भी है; HTML बॉक्स पर mask-mode से शुरू करें।

कठोर क्लिप बनाम नरम मास्क

clip-path ज्यामिति काटता है: वृत्त, inset, बहुभुज। किनारा तेज है। मास्क नरम हो सकता है। एक प्रॉपर्टी के दो नाम नहीं:

Hard clip-path versus a soft mask

css

.avatar {
clip-path: circle(50%);
}

.poster {
mask-image: radial-gradient(circle, #000 55%, transparent 80%);
mask-repeat: no-repeat;
}

अवतार और टिकट अक्सर clip-path चाहते हैं। पेज में घुलता हीरो पोस्टर ग्रेडिएंट मास्क चाहता है। मिला सकते हैं, पर एक काम प्रति प्रॉपर्टी शांत है। border-radius के साथ overflow: hidden तीसरा औज़ार है: वंशजों को पैडिंग बॉक्स तक काटता है। मास्क तत्व खुद पेंट करता है, बैकग्राउंड समेत, बिना लेआउट बॉक्स गोल किए।

Safari और WebKit उपसर्ग

कुछ Safari संस्करण अभी भी मानक प्रॉपर्टी के साथ -webkit-mask-image (और साथी) चाहते हैं:

WebKit prefix for Safari

css

.fade-photo {
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

उपसर्ग वाली पंक्ति और मानक पंक्ति। हमेशा केवल उपसर्ग मत भेजो। @supports अतिरिक्त लपेट सकता है; आदत: फेड Safari में भी देखो, केवल Chromium में नहीं।

मास्क बनाम क्लिप बनाम overflow बनाम स्प्राइट

📊 Mask vs clip-path vs overflow vs sprites

Tool	Job	Poor fit
`mask-image` / `mask-mode`	Soft holes, fades, shaped photos on one element	Hiding a whole form; replacing column layout
`clip-path`	Hard circle, polygon, inset silhouette	Soft dissolves; newspaper columns
`overflow: hidden`	Clip descendants to the box (often with radius)	Painting a gradient stencil on the element’s own pixels
Sprites (`background-position`)	Many icon tiles from one bitmap	Stenciling a hero photo; flowing article text
Multi-column (`column-*`)	Newspaper fill of one text stream	Visibility holes in a picture

Optional Advanced ने स्प्राइट आइकन के लिए और कॉलम गद्य के लिए रखे। मास्किंग स्टेंसिल है। तीनों एक ही हीरो पर: फोटो स्प्राइट जैसी कटी और कॉलम जैसी फटी।

क्या मास्क न करें

गन्दा लेआउट «साफ» करने के लिए मास्क मत लगाएँ। बटन या लेबल फेड के नीचे हो तो कोई पढ़ता-दबाता नहीं। स्क्रीन रीडर पाठ सुना सकता है जबकि आँख कुछ न देखे — यह बग है, फीचर नहीं। कंट्रास्ट दिखते हिस्से में अभी भी मायने रखता है। सजावटी फोटो, कार्ड, आइकन आम लक्ष्य हैं; लॉगिन फ़ील्ड नहीं।

Mask is not overflow or a sprite sheet

css

.ok-art {
mask-image: linear-gradient(to right, #000, transparent);
}

.not-a-layout-fix {
/* don't: mask the entire toolbar because it overflowed */
}

.icons {
/* sprites still use background-position — not mask-image */
background-image: url("/img/icons.png");
background-position: 0 -32px;
}

बच्चा कार्ड से बाहर निकले तो overflow (या छोटा बच्चा) लेआउट ठीक है। बारह HTTP आइकन फ़ाइलें हों तो स्प्राइट या SVG सेट एसेट ठीक है। मास्किंग किसी की जगह नहीं लेता।

खुद आज़माएँ

रंगीन बॉक्स को mask-image: linear-gradient(to bottom, #000 50%, transparent) दें और नीचे घुलते देखें।
छोटा SVG या PNG स्टेंसिल लगाएँ; mask-size और mask-position: center।
ग्रे JPEG पर mask-mode: luminance और पारदर्शी PNG पर alpha की तुलना करें।
वही वृत्त clip-path: circle(50%) से — कठोर किनारा देखें।
उसी ग्रेडिएंट के साथ -webkit-mask-image जोड़ें। फॉर्म मास्क न करें।

आम गलतियाँ

मास्क को पेज लेआउट या overflow: hidden की तरह
mask-size भूलना ताकि छोटा स्टेंसिल कोने में पड़ा रहे
बिना mask-mode: luminance JPEG से छेद उम्मीद
-webkit-mask-image छोड़कर Safari में «CSS मास्क» पर दोष
clip-path और mask-image को एक मानना
लेबल, कैप्शन या बटन मास्क कर कंट्रास्ट और क्लिक मारना
स्प्राइट (टाइल ऑफ़सेट) या मल्टी-कॉलम (टेक्स्ट धारा) से उलझान

सार

मास्क एक तत्व पर स्टेंसिल है: यहाँ दिखाओ, वहाँ छिपाओ
mask-image url या ग्रेडिएंट लेता है; आकार, repeat, स्थिति बैकग्राउंड जैसी
mask-mode: अल्फा बनाम ल्यूमिनेंस
clip-path कठोर ज्यामितीय कट है; मास्क फेड हो सकता है
Safari के लिए उपसर्ग; ज़रूरी UI कभी मास्क न करें
Optional Advanced आगे यूज़र इंटरफ़ेस (user-interface) से जारी रहता है

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा