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

mask-mode प्रॉपर्टी मास्क के एलिमेंट की बैकग्राउंड के साथ इंटरैक्ट करने के तरीके को सेट करती है। यह निर्धारित करती है कि मास्क अल्फा चैनल (पारदर्शिता) का उपयोग करेगी या मास्क इमेज की चमक (luminance) वैल्यू का।

सिंटैक्स

cssसिलेक्टर {
  mask-mode: alpha | luminance | match-source;
}

वैल्यूज

उदाहरण . alpha मोड

alpha मोड में SVG मास्क का एप्लिकेशन:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
  mask-mode: alpha;
}

Результат:

उदाहरण . luminance मोड

luminance मोड में SVG मास्क का एप्लिकेशन:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
  mask-mode: luminance;
}

Результат:

उदाहरण . SVG मास्क match-source मोड के साथ

SVG के लिए डिफॉल्ट वैल्यू (match-source) का उपयोग:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="svg-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: url(#svg-mask);
  mask-mode: match-source;
}

Результат:

उदाहरण . विभिन्न मोड के साथ कंपोजिशन

विभिन्न ब्लेंडिंग मोड वाली मास्क का कॉम्बिनेशन:

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat alpha,
    url("arrow.svg") 200px 30px / 150px no-repeat luminance;
  mask-composite: add;
}

Результат:

यह भी देखें