The CSS Podcast - 024: โหมดการผสม
ภาพโมโนโครมเป็นการปรับสีที่ได้รับความนิยมในวงการถ่ายภาพ ซึ่งทำให้รูปภาพดูราวกับมีเพียง 2 สีที่ตัดกัน ได้แก่ สีสำหรับไฮไลต์และสีสำหรับแสงเงา แต่คุณจะทำเช่นนี้ด้วย CSS ได้อย่างไร
คุณใช้เอฟเฟกต์นี้กับรูปภาพใดก็ได้โดยใช้โหมดการผสมและเทคนิคอื่นๆ ที่คุณได้เรียนรู้ เช่น ฟิลเตอร์ และองค์ประกอบจำลอง
โหมดผสมผสานคืออะไร
โหมดการผสมมักใช้ในเครื่องมือออกแบบ เช่น Photoshop เพื่อสร้างความโดดเด่นให้กับองค์ประกอบด้วยการนำสีจากเลเยอร์ 2 เลเยอร์ขึ้นไปมาผสมกัน การเปลี่ยนวิธีผสมสีจะช่วยให้คุณสร้างเอฟเฟกต์ภาพที่น่าสนใจได้ นอกจากนี้ คุณยังใช้โหมดการผสมเป็นยูทิลิตีได้ด้วย เช่น แยกรูปภาพที่มีพื้นหลังสีขาวเพื่อให้ดูเหมือนมีพื้นหลังโปร่งใส
คุณใช้โหมดการผสมส่วนใหญ่ที่มีในเครื่องมือออกแบบกับ CSS ได้โดยใช้พร็อพเพอร์ตี้ mix-blend-mode
หรือ background-blend-mode
mix-blend-mode
จะใช้การผสมกับองค์ประกอบทั้งชิ้น ส่วน background-blend-mode
จะใช้การผสมกับพื้นหลังขององค์ประกอบ
คุณใช้ background-blend-mode
เมื่อองค์ประกอบมีพื้นหลังหลายพื้นและต้องการให้พื้นหลังทั้งหมดกลมกลืนกัน
mix-blend-mode
จะส่งผลต่อองค์ประกอบทั้งหมด รวมถึงองค์ประกอบจำลอง
กรณีการใช้งานอย่างหนึ่งคือในตัวอย่างแรกของรูปภาพแบบ 2 สี ซึ่งมีการใช้เลเยอร์สีกับองค์ประกอบผ่านองค์ประกอบจำลอง
โหมดการผสมแบ่งออกเป็น 2 หมวดหมู่ ได้แก่ โหมดที่แยกได้และโหมดที่แยกไม่ได้ โหมดการผสมที่แยกได้จะพิจารณาองค์ประกอบสีแต่ละอย่าง เช่น RGB โดยแยกกัน โหมดผสมที่แยกไม่ได้จะพิจารณาองค์ประกอบสีทั้งหมดอย่างเท่าๆ กัน
ความเข้ากันได้กับเบราว์เซอร์
mix-blend-mode
background-blend-mode
โหมดผสมผสานที่แยกได้
ปกติ
ซึ่งเป็นโหมดผสมผสานเริ่มต้นและจะไม่เปลี่ยนแปลงวิธีผสมผสานองค์ประกอบกับองค์ประกอบอื่นๆ
คูณ
โหมดผสม multiply
นั้นเหมือนกับการซ้อนภาพโปร่งใสหลายภาพทับกัน
พิกเซลสีขาวจะปรากฏเป็นโปร่งใส และพิกเซลสีดําจะปรากฏเป็นสีดํา
ค่าที่อยู่ตรงกลางจะคูณค่าความสว่าง (แสง)
ซึ่งหมายความว่าแสงจะสว่างขึ้นมากและความมืดจะมืดลง ซึ่งมักจะให้ผลลัพธ์ที่มืดกว่า
.my-element {
mix-blend-mode: multiply;
}
หน้าจอ
การใช้ screen
จะคูณค่า light ซึ่งมีผลตรงข้ามกับ multiply
และมักจะให้ผลลัพธ์ที่สว่างกว่า
.my-element {
mix-blend-mode: screen;
}
ซ้อนทับ
โหมดผสมผสาน overlay
จะรวม multiply
และ screen
สีฐานเข้มจะเข้มขึ้นและสีฐานอ่อนจะอ่อนลง
แต่สีกลางๆ เช่น สีเทา 50% จะไม่ได้รับผลกระทบ
.my-element {
mix-blend-mode: overlay;
}
ทำให้เข้มขึ้น
โหมดผสมผสาน darken
จะเปรียบเทียบความสว่างของสีเข้มของรูปภาพต้นทางและรูปภาพพื้นหลัง แล้วเลือกรูปภาพที่มืดที่สุด
โดยเปรียบเทียบค่า RGB แทนความสว่าง (เช่นเดียวกับที่ multiply
และ screen
จะทำ) สำหรับแต่ละช่องสี
เมื่อใช้ darken
และ lighten
ระบบมักจะสร้างค่าสีใหม่จากกระบวนการเปรียบเทียบนี้
.my-element {
mix-blend-mode: darken;
}
ทำให้สว่างขึ้น
การใช้ lighten
มีผลตรงข้ามกับ darken
.my-element {
mix-blend-mode: lighten;
}
คัลเลอร์ดอดจ์
หากใช้ color-dodge
ระบบจะปรับสีพื้นหลังให้สว่างขึ้นเพื่อให้สอดคล้องกับสีต้นฉบับ
โหมดนี้จะไม่มีผลกับสีดําล้วน
.my-element {
mix-blend-mode: color-dodge;
}
คัลเลอร์เบิร์น
โหมดผสม color-burn
คล้ายกับโหมดผสม multiply
มาก แต่เพิ่มความคมชัด ซึ่งทำให้โทนกลางมีความอิ่มตัวมากขึ้นและลดไฮไลต์
.my-element {
mix-blend-mode: color-burn;
}
แสงเข้ม
การใช้ hard-light
จะทำให้เกิดคอนทราสต์ที่สดใส
โหมดผสมผสานนี้จะกรองหรือคูณค่าความสว่าง
หากค่าพิกเซลสว่างกว่าสีเทา 50% ระบบจะเพิ่มความสว่างของภาพราวกับว่ามีการกรอง หากสีเข้มขึ้น แสดงว่ามีการคูณ
.my-element {
mix-blend-mode: hard-light;
}
แสงนวล
โหมดผสม soft-light
เป็นโหมด overlay
ที่นุ่มนวลกว่า
ซึ่งทํางานในลักษณะเดียวกันมาก แต่คอนทราสต์น้อยกว่า
.my-element {
mix-blend-mode: soft-light;
}
ความแตกต่าง
วิธีที่ดีในการจินตนาการว่า difference
ทํางานอย่างไรนั้นคล้ายกับวิธีทํางานของฟิล์มเนกาทีฟ
โหมดผสมผสาน difference
จะนําค่าต่างของพิกเซลแต่ละพิกเซลไปกลับสีอ่อน
หากค่าสีเหมือนกัน ข้อความจะกลายเป็นสีดํา
ค่าต่างๆ จะกลับกัน
.my-element {
mix-blend-mode: difference;
}
การยกเว้น
การใช้ exclusion
คล้ายกับ difference
มาก แต่แทนที่จะแสดงผลเป็นสีดําสําหรับพิกเซลที่เหมือนกัน exclusion
จะแสดงผลเป็นสีเทา 50% ซึ่งจะให้ผลลัพธ์ที่นุ่มนวลขึ้นและมีคอนทราสต์น้อยลง
.my-element {
mix-blend-mode: exclusion;
}
โหมดผสมผสานที่แยกไม่ได้
คุณอาจคิดว่าโหมดผสมเหล่านี้เป็นองค์ประกอบ color ของ HSL โดยแต่ละรายการจะนําค่าคอมโพเนนต์ที่เฉพาะเจาะจงจากเลเยอร์ที่ใช้งานอยู่มาผสมกับค่าคอมโพเนนต์อื่นๆ
โทนสี
โหมดผสมผสาน hue
จะนําโทนสีของสีต้นทางไปใช้กับความอิ่มตัวและความสว่างของสีพื้นหลัง
.my-element {
mix-blend-mode: hue;
}
ความอิ่มตัว
ซึ่งจะทำงานเหมือนกับ hue
แต่การใช้ saturation
เป็นโหมดการผสมผสานจะใช้ความอิ่มตัวของสีต้นฉบับกับโทนสีและความสว่างของสีพื้นหลัง
.my-element {
mix-blend-mode: saturation;
}
สี
โหมดผสมผสาน color
จะสร้างสีจากโทนสีและความอิ่มตัวของสีต้นทาง รวมถึงความสว่างของสีพื้นหลัง
.my-element {
mix-blend-mode: color;
}
กำลังส่องสว่าง
สุดท้าย luminosity
คือค่าผกผันของ color
ซึ่งจะสร้างสีที่มีความสว่างของสีต้นทาง รวมถึงโทนสีและความอิ่มตัวของสีพื้นหลัง
.my-element {
mix-blend-mode: luminosity;
}
พร็อพเพอร์ตี้ isolation
หากคุณตั้งค่าพร็อพเพอร์ตี้ isolation
ให้มีค่าเป็น isolate
ระบบจะสร้างบริบทการซ้อนใหม่ ซึ่งจะป้องกันไม่ให้เลเยอร์นั้นผสมผสานกับเลเยอร์พื้นหลัง
ดังที่ได้ทราบในโมดูล z-index เมื่อคุณสร้างบริบทการซ้อนใหม่ เลเยอร์นั้นจะกลายเป็นเลเยอร์ฐาน
ซึ่งหมายความว่าโหมดผสมผสานระดับบนสุดจะไม่มีผลอีกต่อไป แต่องค์ประกอบภายในองค์ประกอบที่มีการตั้งค่า isolation: isolate
จะยังคงผสมผสานได้
โปรดทราบว่าการดำเนินการนี้ใช้กับ background-blend-mode
ไม่ได้เนื่องจากระบบแยกพร็อพเพอร์ตี้พื้นหลังไว้แล้ว
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับโหมดการผสม
โหมดผสม CSS ข้อใดต่อไปนี้
หากต้องการผสมสีต่างๆ ด้วยวิธีต่างๆ คุณต้องใช้โหมดการผสมสไตล์ใด