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

เผยแพร่แล้ว: 2019-02-17

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

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

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

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

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

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

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

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

css-blend-modes-photoshop-multiply-example

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

ตัวอย่างพื้นฐานของโหมดผสมผสาน CSS

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

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

css-blend-mode-basic-background — div ที่มีคลาสของ .simple-blended ถูกสร้างขึ้นเพื่อแสดงโหมดผสมผสานการคูณ ด้านซ้ายเป็นภาพต้นฉบับ และด้านขวาเป็นโหมดผสมผสาน

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

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

โหมดผสมผสานพื้นหลังที่มีสองภาพ

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

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

css-blend-modes-two-images — รูปภาพแถวบนสุดเป็นรูปภาพต้นฉบับที่แยกจากกัน ภาพซ้ายแถวที่สองมีพื้นหลังสี: สีม่วง; เพิ่ม รูปภาพทางด้านขวาไม่มีสีพื้นหลัง

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

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

.gradient-on-image {
 background:
 linear-gradient(purple 0%, red 80%),
 linear-gradient(to right, purple 0%, yellow 100%),   url("image.jpg");
 background-blend-mode: screen, difference, lighten;
 }

css-blend-modes-gradient-example — รูปภาพทางด้านซ้ายไม่ได้ใช้โหมดผสมผสาน รูปภาพทางด้านขวามีการไล่ระดับสีและใช้โหมดผสมผสานหลายแบบ

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

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

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

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

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

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

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

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

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

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

เพื่อป้องกันสิ่งนี้ img-wrap div (รวมถึงข้อความหัวเรื่องด้วย) ควรเป็นชุดใหม่ของเนื้อหาที่ซ้อนกัน เพื่อให้แยกออกจากพื้นหลังขององค์ประกอบเนื้อหา สิ่งนี้ทำได้ด้วยคุณสมบัติการแยก ค่าเริ่มต้นคืออัตโนมัติ ดังนั้น 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 ก็ทำงานได้ดีเช่นกัน รูปร่างสามารถกำหนดเป้าหมายได้อย่างง่ายดายเพื่อให้มีโหมดผสมผสานที่ต้องการ

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

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

<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 อาจเป็นตัวเลือกที่ดี หากไม่เป็นเช่นนั้น การนึกถึงภาพที่ "ผสม" เป็นการเพิ่มประสิทธิภาพ (ไม่ใช่ข้อกำหนด) อาจเป็นทางออกที่ดีที่สุดของคุณ

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

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

ถัดไป: ปลั๊กอิน WordPress ที่ดีที่สุดสำหรับนักออกแบบเว็บไซต์

รับผลลัพธ์ที่คุณต้องการมากขึ้นจากปลั๊กอินของคุณ! เราได้ทำการวิจัย ทดสอบ และรวบรวมสุดยอดปลั๊กอิน WordPress "ขนมปังและเนย" ที่นักออกแบบเว็บไซต์ทุกคนควรใช้! ไม่ว่าคุณจะอยู่ในตลาดสำหรับปลั๊กอินป้องกันสแปม ตัวสร้างเพจ หรือปลั๊กอิน SEO ใหม่ รายการที่ครอบคลุมนี้มีปลั๊กอินสำหรับทุกความต้องการใน WordPress ของคุณ เป็นที่รักของเรา ลูกค้าของเรา และลูกค้าของเรา นี่คือปลั๊กอินที่ดีที่สุด 20 ตัวสำหรับนักออกแบบ WordPress อ่านรายชื่อทั้งหมดที่นี่!

บทแนะนำนี้เผยแพร่ครั้งแรกในวันที่ 1-23-2017 อัปเดตล่าสุดเมื่อ 2-16-2019