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