CSS mask-image प्रतियोगिता

वर्णन और उपयोग

mask-image इस गुण का उपयोग एलिमेंट के लिए मास्क इमेज को निर्दिष्ट करने के लिए किया जाता है。

सूचना:CSS में लाइनर और रेडियल ग्रेडिएंट भी मास्क इमेज के रूप में उपयोग किए जा सकते हैं。

इन्स्टांस

उदाहरण 1

इमेज के लिए मास्क लेयर बनाएं:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

अपने आप साफ़ी करें

उदाहरण 2

इमेज को विभिन्न मास्क लेयर सृजित करने के लिए लाइनर और रेडियल ग्रेडिएंट का उपयोग करें:

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

अपने आप साफ़ी करें

उदाहरण 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: none|image|url()|initial|inherit;

गुण मान

मान वर्णन
none मूलभूत मान। छवि शीर्षक का उपयोग न करें।
image छवि शीर्षक के रूप में उपयोग करें।
url() छवि या SVG <mask> तत्व के URL संदर्भ के लिए।
initial इस गुण को उसके मूलभूत मान पर निर्धारित करें। देखें initial।
inherit अपने पितृ तत्व से इस गुण को विरासत करें। देखें inherit।

तकनीकी विवरण

मूलभूत मान: none
विरासतशीलता: नहीं
एनिमेशन निर्माण: समर्थित नहीं है। देखें:एनिमेशन संबंधी गुण।
संस्करण: CSS मास्किंग मॉड्यूल लेवल 1
जावास्क्रिप्ट व्याकरण: object.style.maskImage="url(star.svg)"

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

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

जो '-webkit-' पूर्वसूचक है, वह संख्या पहली बार इस पूर्वसूचक को समर्थन देने वाली संस्करण को प्रदर्शित करती है。

च्रोम एज फायरफॉक्स सैफारी ओपेरा
120 120 53 15.4 15 -webkit-

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

शिक्षा द्वाराCSS मास्क

संदर्भःCSS mask प्रतियोगिता

संदर्भःCSS mask-clip प्रतियोगिता

संदर्भःCSS mask-composite प्रतियोगिता

संदर्भःCSS mask-mode प्रतियोगिता

संदर्भःCSS mask-origin प्रतियोगिता

संदर्भःCSS mask-position प्रतियोगिता

संदर्भःCSS mask-repeat प्रतियोगिता

संदर्भःCSS mask-size प्रतियोगिता

संदर्भःCSS mask-type प्रतियोगिता