CSS Masking
ด้วยการปิดบัง CSS คุณจะสร้างเลเยอร์มาสก์เพื่อวางทับองค์ประกอบเพื่อซ่อนบางส่วนขององค์ประกอบบางส่วนหรือทั้งหมด
คุณสมบัติ CSS mask-image
คุณสมบัติ CSS mask-imageระบุรูปภาพเลเยอร์มาสก์
รูปภาพเลเยอร์มาสก์อาจเป็นรูปภาพ PNG, รูปภาพ SVG, การไล่ระดับสี CSSหรือองค์ประกอบ SVG <mask>
รองรับเบราว์เซอร์
หมายเหตุ:เบราว์เซอร์ส่วนใหญ่รองรับการมาสก์ CSS เพียงบางส่วนเท่านั้น คุณจะต้องใช้คำนำหน้า -webkit- นอกเหนือจากคุณสมบัติมาตรฐานในเบราว์เซอร์ส่วนใหญ่
ตัวเลขในตารางด้านล่างระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์ Numbers ตามด้วย -webkit- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
ใช้รูปภาพเป็น Mask Layer
ในการใช้รูปภาพ PNG หรือ SVG เป็นเลเยอร์มาสก์ ให้ใช้ค่า url() เพื่อส่งผ่านไปยังรูปภาพเลเยอร์มาสก์
รูปภาพมาสก์ต้องมีพื้นที่โปร่งใสหรือกึ่งโปร่งใส สีดำแสดงถึงความโปร่งใสอย่างสมบูรณ์
นี่คือภาพมาสก์ (ภาพ PNG) เราจะใช้:
นี่คือภาพจาก Cinque Terre ในอิตาลี:
ตอนนี้ เราใช้รูปภาพมาสก์ (ภาพ PNG ด้านบน) เป็นเลเยอร์มาสก์สำหรับรูปภาพจาก Cinque Terre ประเทศอิตาลี:
ตัวอย่าง
นี่คือซอร์สโค้ด:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
ตัวอย่างที่อธิบาย
คุณสมบัติmask-imageระบุรูปภาพที่จะใช้เป็นเลเยอร์มาสก์สำหรับองค์ประกอบ
คุณสมบัติmask-repeatระบุว่าจะทำซ้ำภาพมาสก์หรือไม่หรืออย่างไร ค่าno-repeat
บ่งชี้ว่าภาพมาสก์จะไม่ถูกทำซ้ำ (ภาพมาสก์จะแสดงเพียงครั้งเดียว)
ตัวอย่างอื่น
หากเราละเว้นmask-repeatคุณสมบัติ ภาพมาสก์จะถูกทำซ้ำทั่วทั้งรูปภาพจาก Cinque Terre ประเทศอิตาลี:
ตัวอย่าง
นี่คือซอร์สโค้ด:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
ใช้การไล่ระดับสีเป็นเลเยอร์มาสก์
การไล่ระดับสีแบบเส้นตรงและแนวรัศมี CSS สามารถใช้เป็นรูปภาพมาสก์ได้
ตัวอย่างการไล่ระดับสีเชิงเส้น
ที่นี่ เราใช้การไล่ระดับสีเชิงเส้นเป็นเลเยอร์มาสก์สำหรับรูปภาพของเรา การไล่ระดับสีเชิงเส้นนี้เริ่มจากด้านบน (สีดำ) ไปด้านล่าง (โปร่งใส):
ตัวอย่าง
ใช้การไล่ระดับสีเชิงเส้นเป็นเลเยอร์มาสก์:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
ที่นี่ เราใช้การไล่ระดับสีเชิงเส้นร่วมกับการมาสก์ข้อความเป็นเลเยอร์มาสก์สำหรับรูปภาพของเรา:
Cinque Terre เป็นพื้นที่ชายฝั่งใน Liguria ทางตะวันตกเฉียงเหนือของอิตาลี ตั้งอยู่ทางทิศตะวันตกของจังหวัดลาสปีเซีย และประกอบด้วยห้าหมู่บ้าน ได้แก่ Monterosso al Mare, Vernazza, Corniglia, Manarola และ Riomaggiore
Cinque Terre เป็นพื้นที่ชายฝั่งใน Liguria ทางตะวันตกเฉียงเหนือของอิตาลี ตั้งอยู่ทางทิศตะวันตกของจังหวัดลาสปีเซีย และประกอบด้วยห้าหมู่บ้าน ได้แก่ Monterosso al Mare, Vernazza, Corniglia, Manarola และ Riomaggiore
Cinque Terre เป็นพื้นที่ชายฝั่งใน Liguria ทางตะวันตกเฉียงเหนือของอิตาลี ตั้งอยู่ทางทิศตะวันตกของจังหวัดลาสปีเซีย และประกอบด้วยห้าหมู่บ้าน ได้แก่ Monterosso al Mare, Vernazza, Corniglia, Manarola และ Riomaggiore
ตัวอย่าง
ใช้การไล่ระดับสีเชิงเส้นพร้อมกับการมาสก์ข้อความเป็นเลเยอร์มาสก์:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
ตัวอย่างการไล่ระดับสีแบบเรเดียล
ในที่นี้ เราใช้การไล่ระดับแนวรัศมี (มีรูปร่างเป็นวงกลม) เป็นเลเยอร์มาสก์สำหรับรูปภาพของเรา:
ตัวอย่าง
ใช้การไล่ระดับสีในแนวรัศมีเป็นเลเยอร์มาสก์ (วงกลม):
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
ในที่นี้ เราใช้การไล่ระดับแนวรัศมี (มีรูปร่างเป็นวงรี) เป็นเลเยอร์มาสก์สำหรับรูปภาพของเรา:
ตัวอย่าง
ใช้การไล่ระดับสีในแนวรัศมีอื่นเป็นเลเยอร์มาสก์ (วงรี):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
ใช้ SVG เป็น Mask Layer
<mask>สามารถใช้องค์ประกอบSVG ภายในกราฟิก SVG เพื่อสร้างเอฟเฟกต์การมาสก์
ที่นี่ เราใช้องค์ประกอบ SVG <mask>เพื่อสร้างเลเยอร์มาสก์ที่แตกต่างกันสำหรับรูปภาพของเรา:
ตัวอย่าง
เลเยอร์มาสก์ SVG (สร้างเป็นรูปสามเหลี่ยม):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
ตัวอย่าง
เลเยอร์มาสก์ SVG (สร้างเป็นดาว):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
ตัวอย่าง
เลเยอร์มาสก์ SVG (สร้างเป็นวงกลม):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
คุณสมบัติการปิดบัง CSS
ตารางต่อไปนี้แสดงรายการคุณสมบัติการปิดบัง CSS ทั้งหมด:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |