CSS mix-blend-mode प्रॉपर्टी

mix-blend-mode प्रॉपर्टी

mix-blend-mode प्रॉपर्टी का उपयोग यह सेट करने के लिए किया जाता है कि किसी एलिमेंट का कंटेंट उसके डायरेक्ट पैरेंट बैकग्राउंड के साथ कैसे ब्लेंड होना चाहिए।

ब्लेंड मोड मान:

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

श्रेणियां:

• सामान्य: normal
• डार्कनिंग: multiply, darken, color-burn
• लाइटनिंग: screen, lighten, color-dodge
• कंट्रास्ट: overlay, hard-light, soft-light
• इनवर्जन: difference, exclusion
• कंपोनेंट: hue, saturation, color, luminosity

उदाहरण 1: बेसिक ब्लेंड मोड्स

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  height: 800px;
  background-color: brown;
}
img {
  width: 33.3%;
  height: auto;
  float: left;
}
.demo1 { mix-blend-mode: normal; }
.demo2 { mix-blend-mode: darken; }
.demo3 { mix-blend-mode: lighten; }
.demo4 { mix-blend-mode: hue; }
</style>
</head>
<body>
<h2>Xamarin सीखें</h2>
<div class="container">
  <img src="..." alt="Xamarin" class="demo1" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo2" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo3" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>नोट:</strong> mix-blend-mode प्रॉपर्टी Internet Explorer या Edge में सपोर्टेड नहीं है।</p>
</body>
</html>

उदाहरण 2: अधिक ब्लेंड मोड्स

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container { height: 800px; background-color: brown; }
img { width: 33.3%; height: auto; float: left; }
.demo1 { mix-blend-mode: color-dodge; }
.demo2 { mix-blend-mode: color-burn; }
.demo3 { mix-blend-mode: exclusion; }
.demo4 { mix-blend-mode: saturation; }
</style>
</head>
<body>
<h2>Xamarin सीखें</h2>
<div class="container">
  <img src="..." alt="Xamarin" class="demo1" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo2" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo3" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>नोट:</strong> mix-blend-mode प्रॉपर्टी Internet Explorer या Edge में सपोर्टेड नहीं है।</p>
</body>
</html>

मुख्य ब्लेंड मोड्स समझाए गए:

isolation प्रॉपर्टी:

ब्लेंडिंग को कंटेनर तक सीमित करने के लिए:

.container {
  isolation: isolate;  /* नया स्टैकिंग कॉन्टेक्स्ट बनाता है */
}

ब्राउज़र सपोर्ट:

• सभी आधुनिक ब्राउज़र्स (Chrome, Firefox, Safari, Edge 79+)
• IE: सपोर्ट नहीं
• पुराने Edge: सपोर्ट नहीं