CSS mask प्रभाव

परिभाषा और प्रयोग

mask गुण एक छाया या काप के द्वारा एलीमेंट (किसी भी हिस्से या पूरे) को छुपाने के लिए प्रयोग किया जाता है。

mask प्रयोग विधि के लिए अभिप्राय है: निम्नलिखित गुणों का अभिलेखन है:

• mask-image
• mask-mode
• mask-repeat
• mask-position
• मास्क-क्लिप
• mask-origin
• mask-size
• mask-composite

इन्स्टांस

उदाहरण 1

छवि के लिए छाया तबका बनाएं:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

खुद सबसे प्रयास करें

उदाहरण 2

छवि के लिए विभिन्न छाया तबके बनाएं: रेखीय और घूमावी ग्रेडिएंट

.mask1 {
  mask: linear-gradient(black, transparent);
}
.mask2 {
  mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

खुद सबसे प्रयास करें

उदाहरण 3

SVG <mask> एलीमेंट के द्वारा छवि के लिए छाया तबका बनाएं:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

खुद सबसे प्रयास करें

उदाहरण 4

SVG <mask> एलीमेंट के द्वारा छवि के लिए छाया तबका बनाएं:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

खुद सबसे प्रयास करें

CSS ग्रामर

mask-image: mask-image mask-mode mask-repeat mask-position मास्क-क्लिप mask-origin mask-size mask-composite|initial|inherit;

गुण मान

तकनीकी विवरण

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

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

ट्यूटोरियलःCSS मास्क

संदर्भःCSS mask प्रभाव

संदर्भःCSS mask-clip प्रभाव

संदर्भःCSS mask-composite प्रभाव

संदर्भःCSS mask-image प्रभाव

संदर्भःCSS mask-mode प्रभाव

संदर्भःCSS mask-origin प्रभाव

संदर्भःCSS mask-position प्रभाव

संदर्भःCSS mask-repeat प्रभाव

संदर्भःCSS mask-size प्रभाव

संदर्भःCSS mask-type प्रभाव