ใส่เอฟเฟกต์กับรูปภาพที่มีคุณสมบัติ mask-image ของ CSS

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

Rachel Andrew

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

ความเข้ากันได้กับเบราว์เซอร์

เบราว์เซอร์ส่วนใหญ่รองรับพร็อพเพอร์ตี้การมาสก์ CSS มาตรฐานเพียงบางส่วนเท่านั้น คุณจะต้องใช้คำนำหน้า -webkit- เพิ่มเติมจากพร็อพเพอร์ตี้มาตรฐานเพื่อความเข้ากันได้ของเบราว์เซอร์ที่ดีที่สุด โปรดดูฉันใช้ CSS Masks ได้ไหมสำหรับข้อมูลการสนับสนุนเบราว์เซอร์ทั้งหมด

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

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

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

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

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

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

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

การมาสก์ด้วย SVG

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

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

ข้อดีของวิธีนี้คือสามารถใช้มาสก์กับองค์ประกอบ HTML ใดก็ได้ ไม่ใช่เพียงรูปภาพ ขออภัย Firefox เป็นเบราว์เซอร์เดียวที่สนับสนุนวิธีนี้

ทั้งหมดนี้ไม่ได้หายไปไหน เช่นเดียวกับกรณีทั่วไปที่พบบ่อยที่สุดของการมาสก์รูปภาพ เราสามารถรวมภาพนั้นไว้ใน SVG

การมาสก์ด้วยการไล่ระดับสี

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

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

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

การใช้มาสก์หลายรายการ

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

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

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

รูปภาพโดย Julio Rionaldo ใน Unspring