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

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

Rachel Andrew

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

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

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

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

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

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

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

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

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