mask-image प्रॉपर्टी

mask-image प्रॉपर्टी एक इमेज निर्दिष्ट करने की अनुमति देती है, जिसे एलिमेंट के लिए मास्क के रूप में उपयोग किया जाएगा। मास्क यह निर्धारित करती है कि एलिमेंट के कौन से हिस्से दिखाई देंगे और कौन से छिपे रहेंगे। मास्क के रूप में SVG, PNG इमेज या ग्रेडिएंट्स का उपयोग किया जा सकता है।

सिंटैक्स

cssसिलेक्टर {
  mask-image: none | <image> | <url>;
}

वैल्यूज

उदाहरण . मास्क के रूप में SVG का उपयोग

एक इमेज पर मास्क के रूप में दिल की SVG इमेज को ओवरले करें:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 300px;
  mask-repeat: no-repeat;
}

Результат:

उदाहरण . मास्क के रूप में ग्रेडिएंट का उपयोग

एलिमेंट के लिए मास्क के रूप में एक लीनियर ग्रेडिएंट लागू करें:

html<div id="elem"></div>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask-image: linear-gradient(to right, transparent, black);
}

Результат:

उदाहरण . मास्क के रूप में SVG एलिमेंट का उपयोग

SVG एलिमेंट का उपयोग करके एक मास्क बनाएं और इसे एक इमेज पर लागू करें:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#image {
  width: 500px;
  height: 281px;
  mask-image: url(#mask);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

यह भी देखें