หากใครเคยใช้ Photoshop จะประทับใจกับสิ่งที่เรียกว่า Blending Modes ที่สามารถผสานสีของแต่ละ Layers เข้าด้วยกันได้

CSS ก็มีท่านี้เช่นกันภายใต้ชื่อ mix-blend-mode และ blackground-blend-mode สำหรับ Tip นี้ของเราจะกล่าวถึงเฉพาะการใช้งาน mix-blend-mode เท่านั้น

mix-blend-mode เป็น CSS Property ที่สามารถกำหนดให้ผสมส่วนต่าง ๆ ของอีลีเมนต์มันเอง เช่น สีข้อความ รูปภาพ หรือ border เข้ากับอีลีเมนต์ต่าง ๆ ที่อยู่ภายใต้ Stacking Context เดียวกันกับมันได้ ถ้าเทียบกับ Photoshop ก็คือผสมตัวมันเองเข้ากับ Layers อื่น ๆ นั่นเอง

โหมดของ mix-blend-mode ที่นิยมใช้บ่อย ๆ ได้แก่ multiply screen และ overlay

กำหนดให้ใช้รูปภาพนี้เป็นพื้นหลัง เราจะทำการซ้อนทับด้วยข้อความ จะไปแตะขอบฟ้า ด้วยโหมดต่าง ๆ ของ mix-blend-mode

โดยมีส่วนของ HTML และ CSS ดังนี้

1<div class="container">
2  <img
3    src="https://images.unsplash.com/photo-1525220964737-6c299398493c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
4  />
5  <h1>จะไปแตะขอบฟ้า</h1>
6</div>

1.container {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  width: 100vw;
6  height: 100vh;
7}
8
9h1 {
10  position: absolute;
11  font-size: 150px;
12  border: 10px solid;
13  padding: 0 10px;
14  color: #ffeaa7;
15}

ผลลัพธ์ก่อนการใช้งาน mix-blend-mode เป็นดังนี้

เมื่อกำหนดส่วนของ h1 ด้วย mix-blend-mode เป็น multiply ด้วยคุณสมบัติของ multiply จะทำให้ผลลัพธ์มีสีที่มืดขึ้นตาม background ที่เป็นเลเยอร์ล่าง

1h1 {
2  position: absolute;
3  font-size: 150px;
4  border: 10px solid;
5  padding: 0 10px;
6  color: #ffeaa7;
7  mix-blend-mode: multiply;
8}

เมื่อกำหนดส่วนของ h1 ด้วย mix-blend-mode เป็น screen ด้วยคุณสมบัติของ screen จะทำให้ผลลัพธ์มีสีที่สว่างขึ้นตาม background ที่เป็นเลเยอร์ล่าง

1h1 {
2  position: absolute;
3  font-size: 150px;
4  border: 10px solid;
5  padding: 0 10px;
6  color: #ffeaa7;
7  mix-blend-mode: screen;
8}

เมื่อกำหนดส่วนของ h1 ด้วย mix-blend-mode เป็น overlay ด้วยคุณสมบัติของ overlay จะทำให้ผลลัพธ์ขึ้นอยู่กลับสีพื้นของเลเยอร์ล่าง หากเลเยอร์ล่างจุดไหนดำผลลัพธ์จะได้สีดำกว่า จุดไหนสว่างผลลัพธ์ออกมาจะสว่างกว่า

1h1 {
2  position: absolute;
3  font-size: 150px;
4  border: 10px solid;
5  padding: 0 10px;
6  color: #ffeaa7;
7  mix-blend-mode: overlay;
8}

โค้ดโปรแกรมตามรูปของ Tip แสดงดังนี้