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

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

ไวยากรณ์

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

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

ค่า	คำอธิบาย
`normal`	ปกติ ไม่มีการผสมสี ใช้เป็นค่าเริ่มต้น
`multiply`	คูณ ในโหมดนี้ค่าของสีหลักจะถูกคูณ ด้วยค่าของสีที่ซ้อนกัน ผลลัพธ์ จะได้สีที่เข้มกว่าเสมอ
`screen`	จอ ในโหมดนี้จะคูณค่าที่กลับกัน ของสีหลักและสีที่ซ้อนกัน ผลลัพธ์จะได้สีที่สว่างกว่า เสมอ
`overlay`	ซ้อนทับ ในโหมดนี้สีจะถูกคูณหรือทำให้สว่าง ขึ้นอยู่กับสีหลัก ลวดลายหรือสีจะซ้อนทับพิกเซล เดิม โดยคงส่วนสว่างและ ส่วนมืดของสีหลักไว้

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

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

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

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

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

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

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

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

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