คุณสมบัติ mix-blend-mode

คุณสมบัติ mix-blend-mode กำหนด โหมดการผสมสีต้นทางกับสีพื้นหลัง หรือภาพพื้นหลัง ค่าสำหรับคุณสมบัติจะคล้ายกับโหมดหลัก ของโปรแกรมแก้ไขกราฟิก

ไวยากรณ์

cssตัวเลือก {
  mix-blend-mode: ค่า;
}

ในตารางแสดงค่าหลักสำหรับ คุณสมบัติ mix-blend-mode:

ค่า

ตัวอย่าง

มาดูกันว่าภาพจะแสดงผลอย่างไร เมื่อใช้ค่าเริ่มต้นของคุณสมบัติ mix-blend-mode:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

ตัวอย่าง

ทีนี้ลองเปลี่ยนโหมดการผสม เป็นคูณ:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

ตัวอย่าง

ลองกำหนดค่าของคุณสมบัติ mix-blend-mode เป็นซ้อนทับ:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

ดูเพิ่มเติม