โหมดการผสม

พอดแคสต์ CSS - 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 หมวดหมู่ ได้แก่ แบบแยกกันได้และแยกไม่ได้ โหมดผสานที่แยกกันได้จะพิจารณาส่วนประกอบสีแต่ละอย่าง เช่น RGB แยกต่างหาก โหมดเบลนด์ที่แยกกันไม่ได้จะพิจารณาองค์ประกอบของสีทั้งหมดอย่างเท่าเทียมกัน

ความเข้ากันได้กับเบราว์เซอร์

mix-blend-mode

background-blend-mode

โหมดผสมผสานที่แยกกันได้

ปกติ

โหมดนี้เป็นโหมดผสานเริ่มต้น ซึ่งจะไม่มีการเปลี่ยนแปลงใดๆ เกี่ยวกับการรวมองค์ประกอบเข้ากับองค์ประกอบอื่นๆ

คูณ

โหมดผสาน multiply จะเหมือนกับการวางความโปร่งใสหลายๆ แผ่นซ้อนทับกัน พิกเซลสีขาวจะเป็นแบบโปร่งใส และพิกเซลสีดำจะปรากฏเป็นสีดำ สิ่งที่อยู่ระหว่างนี้จะคูณค่าการส่องสว่าง (แสง) ซึ่งหมายความว่าแสงไฟจะสว่างขึ้นและมืดลงมาก เข้มกว่า มักทำให้ผลลัพธ์ที่เข้มกว่า

.my-element {
  mix-blend-mode: multiply;
}

หน้าจอ

การใช้ screen จะคูณค่าแสง ซึ่งมีผลผกผันกับ 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

การใช้ 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 แต่แทนที่จะแสดงสีดำ สำหรับพิกเซลที่เหมือนกัน จะแสดงผลสีเทา 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 เมื่อคุณสร้างบริบทการเรียงลำดับใหม่ เลเยอร์นั้นจะกลายเป็นเลเยอร์ฐาน ซึ่งหมายความว่าโหมดผสมผสานระดับบนสุดจะใช้ไม่ได้อีกต่อไป แต่องค์ประกอบภายในองค์ประกอบที่มีการตั้งค่า isolation: isolate ยังยังคงเบลนด์ได้

โปรดทราบว่าการดำเนินการนี้ใช้ไม่ได้กับ background-blend-mode เนื่องจากคุณสมบัติพื้นหลังถูกแยกออกไปแล้ว

ตรวจสอบความเข้าใจ

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