ใช้เอฟเฟกต์กับรูปภาพด้วยพร็อพเพอร์ตี้ mask-image ของ CSS

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

เมื่อคุณตัดองค์ประกอบโดยใช้พร็อพเพอร์ตี้ clip-path พื้นที่ที่ถูกตัดจะมองไม่เห็น แต่หากต้องการทําให้รูปภาพบางส่วนทึบแสงหรือใส่เอฟเฟกต์อื่นๆ แทน คุณต้องใช้การมาสก์ โพสต์นี้จะอธิบายวิธีใช้พร็อพเพอร์ตี้ mask-image ใน CSS ซึ่งช่วยให้คุณระบุรูปภาพที่จะใช้เป็นเลเยอร์มาสก์ได้ ซึ่งจะมี 3 ตัวเลือกดังนี้ คุณสามารถใช้ไฟล์ภาพเป็นมาสก์, SVG หรือไล่ระดับสีได้

แม้ว่าการมาสก์ CSS จะพร้อมใช้งานใน Baseline เวอร์ชันใหม่ แต่ฟีเจอร์ส่วนใหญ่ของ mask-image จะพร้อมใช้งานในเบราว์เซอร์เวอร์ชันเก่าโดยใช้ -webkit-mask-image ขึ้นต้น ตัวอย่างต่อไปนี้แสดงวิธีใช้ทั้ง 2 พร็อพเพอร์ตี้ร่วมกันเพื่อให้เบราว์เซอร์รองรับได้ดีที่สุด

มาสก์ด้วยรูปภาพ

พร็อพเพอร์ตี้ mask-image ทํางานคล้ายกับพร็อพเพอร์ตี้ background-image ใช้ค่า url() เพื่อส่งรูปภาพ รูปภาพมาสก์ต้องมีพื้นที่โปร่งใสหรือโปร่งแสงครึ่งหนึ่ง

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

  • รูปภาพแรกคือรูปภาพต้นฉบับของลูกโป่งที่ไม่มีหน้ากาก
  • รูปภาพที่สองมีการใช้มาสก์ซึ่งมีดาวสีขาวบนพื้นหลังที่โปร่งใสทั้งหมด
  • รูปภาพที่สามมีดาวสีขาวบนพื้นหลังแบบไล่ระดับความโปร่งใส

ตัวอย่างนี้ยังใช้พร็อพเพอร์ตี้ mask-size ที่มีค่าเป็น cover ด้วย พร็อพเพอร์ตี้นี้ทํางานในลักษณะเดียวกับ background-size ใช้คีย์เวิร์ด cover และ contain หรือกำหนดขนาดพื้นหลังโดยใช้หน่วยความยาวหรือเปอร์เซ็นต์ที่ถูกต้อง

นอกจากนี้ คุณยังทำซ้ำมาสก์ได้เช่นเดียวกับการทำซ้ำรูปภาพพื้นหลัง เพื่อใช้รูปภาพขนาดเล็กเป็นลวดลายที่ซ้ำกัน

หน้ากากที่มี SVG

คุณสามารถใช้ SVG แทนการใช้ไฟล์รูปภาพเป็นมาสก์ ซึ่งทำได้ 2 วิธีดังนี้ วิธีที่ 1 คือให้มีองค์ประกอบ <mask> ภายใน SVG และอ้างอิงรหัสขององค์ประกอบนั้นในพร็อพเพอร์ตี้ mask-image

.container img {
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

ข้อดีของแนวทางนี้คือการใช้หน้ากากกับองค์ประกอบ HTML ใดก็ได้ ไม่ใช่แค่รูปภาพ

สำหรับกรณีที่พบบ่อยที่สุดของการมาสก์รูปภาพ คุณรวมรูปภาพไว้ใน SVG แทนได้ แนวทางแรกคือ "พร้อมใช้งานใหม่ตามค่าเริ่มต้น" ซึ่งรวมถึงรูปภาพใน SVG ซึ่งเบราว์เซอร์รุ่นเก่าที่รองรับเวอร์ชันที่มีคำนำหน้า -webkit จะรองรับ

มาสก์ที่มีการไล่ระดับสี

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

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

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

มาสก์หลายรายการ

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

ตัวอย่างเช่น มีลวดลายตารางหมากรุกในลวดลายที่มีไล่ระดับสี CSS นี้ โค้ดที่ใช้รูปภาพพื้นหลังมีลักษณะดังนี้

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

หากต้องการเปลี่ยนรูปแบบนี้หรือรูปแบบอื่นๆ ที่ออกแบบมาสำหรับรูปภาพพื้นหลังให้เป็นมาสก์ คุณจะต้องแทนที่พร็อพเพอร์ตี้ background-* ด้วยพร็อพเพอร์ตี้ mask ที่เกี่ยวข้อง ซึ่งรวมถึงพร็อพเพอร์ตี้ที่มีคำนำหน้า -webkit ด้วย

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

คุณสามารถสร้างเอฟเฟกต์ที่ยอดเยี่ยมได้โดยใช้รูปแบบไล่ระดับกับรูปภาพ ทดสอบรูปแบบอื่นๆ โดยการแยก CodePen ต่อไปนี้

นอกจากการครอบตัดแล้ว การใช้มาสก์ CSS ยังเป็นอีกวิธีในการเพิ่มความน่าสนใจให้กับรูปภาพและองค์ประกอบ HTML อื่นๆ โดยไม่ต้องใช้แอปพลิเคชันกราฟิก