การมาสก์ 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 อื่นๆ โดยไม่ต้องใช้แอปพลิเคชันกราฟิก