วิธีใช้โหมดผสมผสาน CSS

โหมดผสมผสาน CSS เป็นวิธีง่ายๆ ในการเพิ่มเอฟเฟ็กต์รูปภาพภายในเบราว์เซอร์ของคุณ

ด้วยเหตุนี้ วิธีการแก้ไขแบบดั้งเดิมแล้วบันทึกรูปภาพจากโซลูชันซอฟต์แวร์แก้ไขรูปภาพจึงไม่จำเป็นเสมอไป ในฐานะนักออกแบบ เราใช้เวลานับไม่ถ้วนในการเพิ่มเอฟเฟ็กต์ให้กับรูปภาพด้วยเครื่องมือต่างๆ เช่น Adobe Photoshop เมื่อคุณอ่านบทช่วยสอนนี้ คุณจะสังเกตเห็นว่ามีตัวเลือกมากมายที่คล้ายกับตัวเลือกใน Photoshop แต่ตอนนี้สามารถทำได้ด้วยประสิทธิภาพของการจัดรูปแบบ CSS

โหมดผสมผสานของเบราว์เซอร์จะขจัดความจำเป็นในการใช้ซอฟต์แวร์แก้ไขภาพโดยสิ้นเชิงหรือไม่ ยังไม่ทั้งหมด และยังไม่แน่นอน แต่การรองรับ CSS และเบราว์เซอร์นั้นช่วยสนับสนุนแนวทางใหม่ๆ ในการแก้ไขรูปภาพ การตัดและการมาสก์ CSS และ SVG, โหมดผสมผสาน, การแปลง 3 มิติ และอื่น ๆ สามารถลดการพึ่งพาที่เรามีสำหรับซอฟต์แวร์แก้ไขรูปภาพได้อย่างแน่นอน เมื่อเบราว์เซอร์มีความซับซ้อนมากขึ้น เราจะเห็นศักยภาพมากขึ้นและ (หวังว่าจะ) ใช้เวลากับ Photoshop น้อยลง

CSS Blend Modes และ CSS Mix Blend Modes

บทช่วยสอนนี้จะครอบคลุมโหมดผสมผสาน CSS และวิธีการใช้งาน ในการเริ่มต้น มีตัวเลือกต่าง ๆ สองสามอย่างที่คุณควรทราบ หนึ่งคือเอฟเฟกต์ด้วย background-blend-mode และอีกอันคือ mix-blend-mode

เมื่อใช้ background-blend-mode property คุณสามารถผสมผสานเลเยอร์พื้นหลัง (ภาพหรือสี) ขององค์ประกอบได้ โหมดผสมผสานถูกกำหนดเป็นค่าและระบุวิธีการผสมหรือผสมสีของรูปภาพพื้นหลังกับสีหรือรูปภาพพื้นหลังอื่นๆ ที่อยู่เบื้องหลัง

จะเกิดอะไรขึ้นถ้าคุณต้องการผสมบางอย่าง แต่ไม่ใช่กับองค์ประกอบพื้นหลัง สามารถผสมองค์ประกอบต่างๆ เข้าด้วยกันโดยใช้คุณสมบัติ mix-blend-mode คุณสมบัตินี้อธิบายว่าการผสมควรเป็นอย่างไรระหว่างองค์ประกอบ HTML แบบเรียงซ้อน องค์ประกอบบนเลเยอร์ที่ทับซ้อนกันจะกลมกลืนกับองค์ประกอบที่อยู่ด้านล่าง รูปภาพ ข้อความ เส้นขอบ หรือหัวเรื่องจะได้รับอิทธิพลจากพร็อพเพอร์ตี้นี้

ตัวอย่างการคูณของ Adobe Photoshop

การดูวิธีดั้งเดิมในการแสดงโหมดผสมผสานในโปรแกรมแก้ไขภาพทำให้เราทราบว่าเราทำอะไรได้บ้างด้วยโหมดผสมผสาน CSS รูปภาพต่อไปนี้สร้างขึ้นใน Adobe Photoshop รูปภาพอยู่บนเลเยอร์พื้นหลังของตัวเองโดยมีเลเยอร์สีแดงอยู่ด้านบน เลือกโหมดผสมผสานสำหรับเลเยอร์สีแดงซึ่งก็คือ "ทวีคูณ" อย่างที่คุณเห็นมีการซ้อนทับสีแดง เพื่อให้ได้เอฟเฟ็กต์นี้ Adobe Photoshop จะใช้สีจากเลเยอร์ที่ใช้ "คูณ" คูณด้วยสีบนเลเยอร์ด้านล่าง จากนั้นหารด้วย 255 เพื่อแสดงผล

เอฟเฟกต์แบบเดียวกันนี้สามารถทำได้ด้วย CSS ช่วยให้ปรับแต่งได้เร็วขึ้นและอัปเดตได้ง่าย

ตัวอย่างพื้นฐานของ CSS Blend Mode

ตัวอย่างง่ายๆ เพื่อดูว่าโหมดผสมผสานทำงานอย่างไร คือการผสมภาพกับ a กับ background-color ขั้นแรก ต้องประกาศเส้นทาง URL ไปยังรูปภาพ จากนั้นจึงระบุสี หลังจากตัดสินใจแล้ว จำเป็นต้องเลือกโหมดผสมผสาน ทวีคูณถูกเลือกที่นี่เพื่อแสดงว่าโหมดผสมผสานนี้ส่งผลต่อลักษณะที่ปรากฏของ background-image อย่างไร

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

โหมดผสมผสานคือวิธีคำนวณค่าสีสุดท้ายของพิกเซลเมื่อเลเยอร์ทับซ้อนกัน โหมดผสมผสานแต่ละโหมดจะใช้ค่าสีของพื้นหน้าและฉากหลัง (สีบนและสีล่าง) คำนวณค่าของมัน และส่งกลับค่าสี เลเยอร์สุดท้ายที่มองเห็นได้คือผลลัพธ์ของการคำนวณโหมดผสมผสานในทุกพิกเซลที่ทับซ้อนกันระหว่างเลเยอร์ผสม

Multiply เป็นโหมดเบลนด์ที่ได้รับความนิยมมาก แต่ก็ยังมีตัวเลือกโหมดเบลนด์อื่นๆ ให้เลือก เช่น สกรีน โอเวอร์เลย์ มืดลง จางลง หลบสี เบิร์นสี ฮาร์ดไลท์ ซอฟต์ไลท์ ความแตกต่าง การยกเว้น สี ความอิ่มตัว สี และความส่องสว่าง หากระบุเป็น "ปกติ" สิ่งนี้จะรีเซ็ตสิ่งต่างๆ แทนที่จะดูรายละเอียดของแต่ละโหมดการผสมทีละโหมด การทดลองกับโหมดเหล่านี้เป็นวิธีที่ดีที่สุดในการพิจารณาว่าผลลัพธ์สุดท้ายจะเป็นอย่างไร

โหมดผสมผสานพื้นหลังด้วยสองภาพ

แทนที่จะใส่สีทับบนภาพ การซ้อนภาพสองภาพเข้าด้วยกันอาจให้เอฟเฟกต์ที่ยอดเยี่ยม ง่ายเหมือนการเพิ่มรูปภาพพื้นหลังสองรูปในการประกาศ CSS ตัวเลือกต่อไปคือการมีสีพื้นหลัง (หรือไม่ก็ได้) หากคุณไม่ต้องการสีพื้นหลัง คุณสามารถลบออกได้และรูปภาพจะผสมผสานเข้าด้วยกันขึ้นอยู่กับโหมดผสมผสานที่คุณเลือก

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

การไล่ระดับสีในโหมดผสมพื้นหลัง

แทนที่จะใช้เพียงสีเดียว การไล่ระดับสียังสามารถให้เอฟเฟกต์พิเศษบางอย่างได้อีกด้วย

 .gradient-on-image {
 พื้นหลัง:
 การไล่ระดับสีเชิงเส้น (สีม่วง 0% สีแดง 80%)
 การไล่ระดับสีเชิงเส้น (ไปทางขวา, สีม่วง 0%, สีเหลือง 100%), url ("image.jpg");
 โหมดพื้นหลัง: หน้าจอ, ความแตกต่าง, สว่างขึ้น;
 } 

นอกจากนี้ คุณจะสังเกตเห็นว่าตัวอย่างนี้มีโหมดผสมผสานพื้นหลังหลายโหมด หากโหมดผสมผสานเดียวไม่เพียงพอ สามารถใช้หลายโหมดได้

ตัวอย่างการทำงานสามารถพบได้ใน Codepen นี้

ตัวอย่างโหมดการผสม

จนถึงจุดนี้ โฟกัสอยู่ที่พื้นหลัง จะเกิดอะไรขึ้นหากองค์ประกอบอื่นๆ ในหน้าต้องการใช้ประโยชน์จากโหมดผสมผสาน ซึ่งไม่มีปัญหาและมีโหมดผสมผสานประเภทเดียวกันให้ใช้งาน

สิ่งต่างๆ จะดูเหมือนกันจาก background-blend-modes ยกเว้นโหมดเริ่มต้น สืบทอด และไม่ได้ตั้งค่า

• เริ่มต้น: การตั้งค่าเริ่มต้นของคุณสมบัติที่ไม่ได้ตั้งค่าโหมดผสมผสาน
• สืบทอด: สืบทอดโหมดผสมผสานจากองค์ประกอบหลัก
• Unset: ลบโหมดผสมผสานออกจากองค์ประกอบ

ตัวอย่างพื้นฐานของโหมดการผสมแบบผสมที่มีการแยกส่วน

เมื่อทำงานกับ mix-blend-mode คุณจะต้องทำการแยกบางอย่าง อันดับแรก สิ่งสำคัญคือต้องรู้ว่า "การซ้อน" นั้นเป็นไปได้ และสิ่งนี้มีประโยชน์เมื่อทำงานกับเลเยอร์จำนวนมาก ลองนึกถึงกองกล่อง แต่ละกล่องแยกจากกลุ่ม ในแต่ละกล่องสามารถใส่ของได้หลายชั้น วิธีคิดนี้จะช่วยในการพิจารณาว่าสิ่งใดจำเป็นต้องแยกออกจากกัน

ผสมข้อความและรูปภาพด้วยโหมดผสม

ในตัวอย่างนี้ div ที่มีคลาส img-wrap มีรูปภาพ ภาพมี mix-blend-mode การคูณ โดยพื้นฐานแล้ว ภาพจะดูเหมือนตกลงไปในพื้นหลัง

เพื่อป้องกันสิ่งนี้ div img-wrap (รวมถึงข้อความส่วนหัวด้วย) ควรเป็นชุดใหม่ของเนื้อหาแบบเรียงซ้อน ดังนั้นจึงแยกออกจากพื้นหลังขององค์ประกอบเนื้อหา สิ่งนี้ทำได้ด้วยคุณสมบัติการแยก ค่าเริ่มต้นคือ auto ดังนั้น isolation: isolate; จะต้องเพิ่ม

หากต้องการทดสอบ ให้แสดงความคิดเห็นเกี่ยวกับคุณสมบัติการแยกใน div ที่มีคลาสเป็น .img-wrap และตรวจสอบผลลัพธ์

นี่คือ HTML:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

นี่คือ CSS ให้ความสนใจเป็นพิเศษกับ isolate บน .img-wrap

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

ตัวอย่างการทำงานสามารถพบได้ใน Codepen

ข้อความตัดออกด้วยโหมดผสมผสาน

สามารถสร้างเอฟเฟ็กต์ประเภทที่น่าสนใจได้ด้วยโหมดผสมผสาน มีวิธีง่ายๆ ในการตัดข้อความ พื้นหลังถูกซ่อนไว้โดยการเติมองค์ประกอบ h1

นี่คือ HTML:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

ที่มี <div> จะเต็มไปด้วยภาพพื้นหลังป่า

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

ส่วนหัวข้างในมีสไตล์ด้วยสีพื้นหลังที่เลือกได้ ส่วนหัวมีเอฟเฟ็กต์แบบซีทรูพร้อมภาพพื้นหลังกึ่งซีทรูโดยใช้ mix-blend-mode แบบคูณ:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

ตัวอย่างการทำงานสามารถพบได้ใน Codepen

โหมดผสมผสานและ SVG

ไฟล์ SVG เป็นที่นิยมอย่างมากบนเว็บ และโหมดการผสม CSS ก็ทำงานได้ดีเช่นกัน รูปร่างสามารถกำหนดเป้าหมายได้อย่างง่ายดายเพื่อให้ได้โหมดผสมผสานที่ต้องการ

การแยกตัวเป็นกุญแจสำคัญในตัวอย่างนี้เช่นกัน พื้นหลังสีเทาจะรบกวน

นี่คือรหัสสำหรับสร้างกลุ่มแวดวง:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

นี่คือสไตล์ CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

ตัวอย่างนี้สามารถพบได้ใน Codepen

เบราว์เซอร์รองรับโหมดพื้นหลังและโหมดผสม

การสนับสนุนเบราว์เซอร์ค่อนข้างดี แต่ไม่สอดคล้องกันทั้งหมดสำหรับโหมดพื้นหลังผสม ก่อนเริ่มการออกแบบโดยใช้คุณลักษณะนี้ โปรดตรวจสอบว่าฉันสามารถใช้ได้ไหม ขณะนี้ Edge และ Safari ยังขาดการสนับสนุน เพื่อจัดการกับการสนับสนุนที่จำกัดและขึ้นอยู่กับว่าเบราว์เซอร์ใดต้องรองรับ CSS Feature Query อาจเป็นตัวเลือกที่ดี หากไม่เป็นเช่นนั้น การนึกถึงภาพที่ "ผสมผสาน" เป็นการปรับปรุง (ไม่ใช่ข้อกำหนด) อาจเป็นทางเลือกที่ดีที่สุดของคุณ

การสนับสนุนเบราว์เซอร์จะดีกว่าเล็กน้อยสำหรับโหมดผสม เป็นการดีที่จะรับรู้ถึงการสนับสนุนบางส่วน ตัวอย่างเช่น Safari ไม่รองรับเฉดสี ความอิ่มตัวของสี หรือความส่องสว่าง

วิธีที่ดีที่สุดในการเรียนรู้อย่างแท้จริงเกี่ยวกับสิ่งที่สามารถออกแบบด้วยโหมดผสมผสานคือการทดลอง ตัวอย่างที่แสดงนี้เป็นเพียงรอยขีดข่วนบนพื้นผิว น่าทึ่งมากที่สามารถสร้างกราฟิกประเภทใดได้โดยใช้โหมดผสมผสาน นี่เป็นก้าวที่ดีสำหรับสิ่งที่สามารถทำได้บนเว็บ

ขับเคลื่อนอิสระในการสร้างสรรค์ด้วย WP Engine

WP Engine ขับเคลื่อนอิสระในการสร้างบน WordPress ผลิตภัณฑ์ของบริษัทซึ่งเร็วที่สุดในบรรดาผู้ให้บริการ WordPress ทั้งหมด ขับเคลื่อนประสบการณ์ดิจิทัล 1.5 ล้านครั้ง ไซต์ชั้นนำกว่า 200,000 ไซต์ในโลกใช้ WP Engine เพื่อขับเคลื่อนประสบการณ์ดิจิทัลมากกว่าใครใน WordPress ค้นหาข้อมูลเพิ่มเติมของเราที่ wpengine.com หรือพูดคุยกับตัวแทนวันนี้!