คุณสมบัติ CSS 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;

ตัวอย่างที่ 1: normal, darken, lighten, hue

<!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>

ผลลัพธ์

ตัวอย่างที่ 2: color-dodge, color-burn, exclusion, saturation

<!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>

ผลลัพธ์

กลุ่ม blend mode ตามลักษณะ

หมายเหตุ: ต้องมีพื้นหลัง (background) บนพ่อ และองค์ประกอบลูกต้องไม่มี background-color ทับ (transparent) จึงจะเห็นผลชัดเจน ไม่รองรับ IE/Edge เก่า