CSS Masking

spray paint के किसी can के ऊपर रखे एक stencil की कल्पना करें: जहाँ stencil solid है, paint block हो जाता है; जहाँ यह काटा गया है, paint freely through चला जाता है। Stencil पर gray areas कुछ paint को partially through जाने देते। CSS masking बिल्कुल उसी stencil की तरह काम करता है, यह तय करने के लिए किसी image या gradient की transparency इस्तेमाल करते हुए कि किसी element के कौन-से हिस्से visible हैं।

In this page:

mask-image क्या करता है
mask-image बनाम clip-path
mask-size और mask-position
mask-repeat
कई Masks को Combine करना और Edges को Fade करना

Syntax

css

selector {
  mask-image: url("mask.png") | linear-gradient(...);
  mask-size: size;
  mask-repeat: no-repeat;
}

mask-image क्या करता है

mask-image किसी element पर एक image (या gradient) को stencil की तरह लागू करता है: mask के पूरी तरह opaque areas element को पूरी तरह visible रखते हैं, पूरी तरह transparent areas इसे पूरी तरह hide कर देते हैं, और partially transparent areas element को partially visible बनाते हैं।

एक background image के उलट, mask के अपने pixel colors को नज़रअंदाज़ किया जाता है, सिर्फ इसका alpha channel मायने रखता है।

Note:

Accepted values:
mask-image — none, url(), या एक gradient
mask-mode — alpha | luminance | match-source
mask-repeat — repeat | no-repeat | space | round
mask-position — keywords, lengths, या percentages
mask-size — auto | cover | contain | length
mask-composite — add | subtract | intersect | exclude

उदाहरण: What mask-image Does

css

<style>
.box {
  width: 150px;
  height: 150px;
  background: crimson;
  mask-image: radial-gradient(circle, black 50%, transparent 70%);
}
</style>
<div class="box"></div>

mask-image बनाम clip-path

clip-path सिर्फ hard geometric edges support करता है (कोई shape या तो पूरी तरह clip region के अंदर है या पूरी तरह बाहर, कोई partial transparency नहीं), जबकि mask-image smooth, soft-edged transitions support करता है क्योंकि यह किसी भी grayscale या alpha gradient इस्तेमाल कर सकता है -- masking सही tool है जब आपको एक fade चाहिए, clip-path तब जब आपको एक crisp cut चाहिए।

Note:

Accepted values:
clip-path: <basic-shape> | url() | none — एक shape में clip करता है, सिर्फ hard edges
mask-image: <image> | none — image के alpha से soft edges
mask-image: linear-gradient(black, transparent) — fade out करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: mask-image vs clip-path

css

<style>
.masked {
  width: 100px;
  height: 100px;
  background: blue;
  mask-image: linear-gradient(black, transparent);
}
.clipped {
  width: 100px;
  height: 100px;
  background: green;
  clip-path: circle(50%);
}
</style>
<div class="masked"></div>
<div class="clipped"></div>

mask-size और mask-position

mask-size और mask-position mask image की scaling और placement control करते हैं, background-size और background-position जैसी ही syntax और keywords (cover, contain, percentages) इस्तेमाल करते हुए -- किसी mask को उस element से independently scale होने देते हुए जिस पर यह लागू है।

Note:

Accepted values:
mask-size: auto — default, natural size
mask-size: cover — box cover करने के लिए scale होता है
mask-size: contain — अंदर fit होने के लिए scale होता है
mask-size: <length> <length> — explicit size
mask-position: <position> — जैसे center, top left, 50% 50%
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: mask-size and mask-position

css

<style>
.box {
  width: 200px;
  height: 100px;
  background: orange;
  mask-image: url('https://placehold.co/50x50');
  mask-size: 50px;
  mask-position: center;
}
</style>
<div class="box"></div>

mask-repeat

mask-repeat control करता है कि mask image element में tile होती है या नहीं, बिल्कुल background-repeat जैसा काम करता है, और एक mask image को stretch करने के बजाय किसी बड़ी surface पर एक छोटा repeating pattern (जैसे कोई dot-grid या diagonal-stripe mask) लागू करने के लिए उपयोगी है।

Note:

Accepted values:
repeat — default, दोनों axes tile होते हैं
repeat-x — सिर्फ horizontally tile होता है
repeat-y — सिर्फ vertically tile होता है
no-repeat — एक बार draw होता है
space — पूरी copies tile होती हैं और उन्हें फैलाया जाता है
round — पूरी copies tile होती हैं, fit करने के लिए scale होते हुए
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: mask-repeat

css

<style>
.box {
  width: 200px;
  height: 100px;
  background: teal;
  mask-image: url('https://placehold.co/20x20');
  mask-repeat: repeat;
}
</style>
<div class="box"></div>

कई Masks को Combine करना और Edges को Fade करना

Multiple comma-separated mask-image values कई background images की तरह layer होती हैं, और एक बहुत common real-world pattern एक linear-gradient mask इस्तेमाल करना है ताकि किसी image या लंबे text block को उसके edges पर smoothly transparent में fade किया जा सके, एक harsh visual cutoff से बचते हुए।

Note:

Accepted values:
mask-image: A, B — comma-separated layers
mask-composite: add — default, layers union होती हैं
mask-composite: subtract — top layer में से नीचे की layers घटाई जाती हैं
mask-composite: intersect — सिर्फ overlapping parts बचते हैं
mask-composite: exclude — सिर्फ non-overlapping parts बचते हैं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Combining Multiple Masks and Fading Edges

css

<style>
.box {
  width: 300px;
  height: 100px;
  background: url('https://placehold.co/300x100');
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}
</style>
<div class="box"></div>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS object-position Next Lesson → CSS Math Functions

CSS Masking

mask-image क्या करता है

mask-image बनाम clip-path

mask-size और mask-position

mask-repeat

कई Masks को Combine करना और Edges को Fade करना

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code