การมาสก์ CSS จะมีตัวเลือกให้คุณใช้รูปภาพเป็นเลเยอร์มาสก์ ซึ่งหมายความว่าคุณสามารถใช้รูปภาพ, SVG หรือการไล่ระดับสีเป็นมาสก์เพื่อสร้างเอฟเฟกต์ที่น่าสนใจได้โดยไม่ต้องใช้โปรแกรมตกแต่งภาพ
เมื่อตัดองค์ประกอบโดยใช้คุณสมบัติ 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 ด้านล่าง ภาพแรกเป็นรูปภาพต้นฉบับของบอลลูนที่ไม่มีมาสก์ รูปภาพที่ 2 มีการใช้มาสก์ซึ่งมีดาวสีขาวบนพื้นหลังโปร่งใสทั้งหมด ภาพที่ 3 มีดาวสีขาวบนพื้นหลังที่มีความโปร่งใสแบบไล่ระดับสี
ในตัวอย่างนี้ ฉันใช้พร็อพเพอร์ตี้ mask-size ที่มีค่าเป็น cover ด้วย
พร็อพเพอร์ตี้นี้ทำงานในลักษณะเดียวกันกับ background-size
คุณสามารถใช้คีย์เวิร์ด cover และ contain หรือระบุขนาดพื้นหลังโดยใช้หน่วยความยาวที่ถูกต้องหรือเป็นเปอร์เซ็นต์ก็ได้
คุณยังใส่มาสก์ซ้ำได้เหมือนที่ใช้ภาพพื้นหลังซ้ำ เพื่อใช้รูปภาพขนาดเล็กเป็นรูปแบบที่ซ้ำกัน
การมาสก์ด้วย SVG
คุณใช้ SVG แทนที่จะใช้ไฟล์ภาพเป็นมาสก์ได้
ซึ่งทำได้ 2 วิธีดังนี้
อย่างแรกคือให้มีองค์ประกอบ <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;
มีเอฟเฟ็กต์ดีๆ ในการใช้ลวดลายการไล่ระดับสีกับรูปภาพ ลองรีมิกซ์ภาพแตกและทดสอบรูปแบบอื่นๆ
นอกจากการตัดคลิปแล้ว มาสก์ CSS ก็เป็นวิธีเพิ่มความน่าสนใจให้กับรูปภาพและองค์ประกอบ HTML อื่นๆ โดยไม่ต้องใช้แอปพลิเคชันกราฟิก
รูปภาพโดย Julio Rionaldo ใน Unsplash