คุณสมบัติโหมดผสมผสมใช้เพื่อกำหนดว่าเนื้อหาขององค์ประกอบควรผสมผสานกับพื้นหลังหลักโดยตรงอย่างไร ต่อไปนี้เป็นค่าคุณสมบัติ -
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> ผลลัพธ์
