โหมดการผสม

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ไม่ได้เนื่องจากระบบแยกพร็อพเพอร์ตี้พื้นหลังไว้แล้ว

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับโหมดการผสม