मिश्रण-मिश्रण-मोड संपत्ति का उपयोग यह निर्धारित करने के लिए किया जाता है कि किसी तत्व की सामग्री को उसकी प्रत्यक्ष मूल पृष्ठभूमि के साथ कैसे मिश्रित किया जाना चाहिए। निम्नलिखित संपत्ति मूल्य हैं -
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
उदाहरण
आइए अब एक उदाहरण देखें -
<!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>Learn Xamarin</h2>
<div class="container">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Note:</strong> The mix-blend-mode property is not supported in Internet Explorer or Edge.</p>
</body>
</html> आउटपुट
उदाहरण
आइए अब एक और उदाहरण देखें -
<!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>Learn Xamarin</h2>
<div class="container">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Note:</strong> The mix-blend-mode property is not supported in Internet Explorer or Edge.</p>
</body>
</html> आउटपुट
