0Pricing
CSS Academy · บทเรียน

mix-blend-mode สำหรับการผสมเลเยอร์

ผสมสีขององค์ประกอบกับเนื้อหาด้านล่างด้วยโหมดผสมแบบ Photoshop ใน CSS

mix-blend-mode สำหรับการผสมเลเยอร์ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

mix-blend-mode คืออะไร

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

ปกติ (ค่าเริ่มต้น)

normal เป็นค่าเริ่มต้น ซึ่งหมายถึงไม่มีการผสม องค์ประกอบด้านบนจะปิดทับสิ่งที่อยู่ด้านล่าง

multiply

multiply ทำให้สีเข้มขึ้นโดยคูณค่าพิกเซล สีขาวจะกลายเป็นโปร่งใส ส่วนสีดำยังคงเป็นสีดำ เหมาะอย่างยิ่งสำหรับวางรูปภาพโทนเข้มบนพื้นหลังสี

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

screen

screen เป็นค่าผกผันของ multiply จึงทำให้สว่างขึ้น สีดำจะกลายเป็นโปร่งใส ส่วนสีขาวยังคงเป็นสีขาว เหมาะสำหรับเอฟเฟกต์แสงและแสงเรือง

<div class="blend-wrapper">
  <div class="glow"></div>
</div>

overlay

overlay ผสาน multiply กับ screen พื้นที่มืดจะมืดลง ส่วนพื้นที่สว่างจะสว่างขึ้น ช่วยเพิ่มความเปรียบต่างโดยยังรักษาโทนสีกลางไว้

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

difference

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

<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>

แสงแข็งและแสงนุ่ม

hard-light ใช้ multiply หรือ screen โดยขึ้นอยู่กับสีต้นทาง ส่วน soft-light เป็นรูปแบบที่นุ่มกว่าและเพิ่มความเปรียบต่างน้อยกว่า

โหมดผสมสี

โหมดเหล่านี้จะผสมเฉพาะคุณสมบัติบางอย่างของสี:

  • hue — ใช้เฉดสีจากด้านบน และใช้ความอิ่มตัวกับความสว่างจากด้านล่าง
  • saturation — ใช้ความอิ่มตัวจากด้านบน
  • color — ใช้เฉดสีและความอิ่มตัวจากด้านบน และใช้ความสว่างจากด้านล่าง
  • luminosity — ใช้ความสว่างจากด้านบน

โหมดสีสำหรับภาพดูโอโทน

สร้างภาพดูโอโทนโดยซ้อนองค์ประกอบที่มีสีและใช้ mix-blend-mode: color:

<div class="duotone"></div>

เอฟเฟกต์ข้อความกลับสี

ข้อความที่ดูเป็นสีตรงข้ามกับพื้นหลังใด ๆ:

<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>

บริบทการซ้อนและโหมดการผสม

mix-blend-mode จะผสมกับองค์ประกอบที่อยู่ในบริบทการซ้อนเดียวกัน คุณสมบัติ isolation: isolate บนองค์ประกอบแม่จะสร้างบริบทการซ้อนใหม่ ป้องกันไม่ให้โหมดการผสมส่งผลต่อองค์ประกอบนอกกลุ่มที่แยกไว้

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

โหมดการผสมใดทำให้ส่วนสีขาวขององค์ประกอบโปร่งใส และคงส่วนที่มีสีหรือสีเข้มไว้ คล้ายกับกระดาษโปร่งใส

สรุป

mix-blend-mode ผสมพิกเซลขององค์ประกอบกับเนื้อหาที่อยู่ด้านล่าง โหมดสำคัญ ได้แก่ multiply (ทำให้เข้มขึ้น สีขาว → โปร่งใส), screen (ทำให้สว่างขึ้น สีดำ → โปร่งใส), overlay (เพิ่มความเปรียบต่าง), difference (การลบสี) และ color (เปลี่ยนสีรูปภาพ) ใช้ isolation: isolate บนองค์ประกอบแม่เพื่อจำกัดขอบเขตการผสม

คำถามที่พบบ่อย

บทเรียน “mix-blend-mode สำหรับการผสมเลเยอร์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “mix-blend-mode สำหรับการผสมเลเยอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “mix-blend-mode สำหรับการผสมเลเยอร์”

ผสมสีขององค์ประกอบกับเนื้อหาด้านล่างด้วยโหมดผสมแบบ Photoshop ใน CSS คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “mix-blend-mode สำหรับการผสมเลเยอร์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. filter: blur brightness contrast grayscale
  2. backdrop-filter สำหรับกระจกฝ้า
  3. mix-blend-mode สำหรับการผสมเลเยอร์
  4. คุณสมบัติ isolation
← กลับไปที่ CSS Academy