CSS mask-imageคุณสมบัติ
ตัวอย่าง
สร้างเลเยอร์มาสก์สำหรับรูปภาพ:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติmask-image
ระบุรูปภาพที่จะใช้เป็นเลเยอร์มาสก์สำหรับองค์ประกอบ
เคล็ดลับ:การไล่ระดับสีแบบเส้นตรงและแนวรัศมีใน CSS สามารถใช้เป็นรูปภาพมาสก์ได้
ค่าเริ่มต้น: | ไม่มี |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.maskImage="url(star.svg)" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Numbers ตามด้วย -webkit- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
ไวยากรณ์ CSS
mask-image: none|image|url|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
none | This is default |
image | An image to use as the mask layer |
url | An url reference to an image or an SVG <mask> element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
สร้างเลเยอร์มาสก์ที่แตกต่างกันสำหรับรูปภาพที่มีการไล่ระดับสีแบบเส้นตรงและแนวรัศมี:
.mask1 {
-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(black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(black 50%, rgba(0, 0,
0, 0.5));
}
ตัวอย่าง
ใช้องค์ประกอบ SVG <mask> เพื่อสร้างเลเยอร์มาสก์สำหรับรูปภาพ:
<svg width="600" height="400">
<mask id="svgmask1">
<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(#svgmask1)"></image>
</svg>
ตัวอย่าง
ใช้องค์ประกอบ SVG <mask> เพื่อสร้างเลเยอร์มาสก์สำหรับรูปภาพ:
<svg width="600" height="400">
<mask id="svgmask1">
<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(#svgmask1)"></image>
</svg>
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติโหมดมาสก์
การอ้างอิง CSS: คุณสมบัติที่มาที่มาสก์
การอ้างอิง CSS: คุณสมบัติตำแหน่งมาสก์
การอ้างอิง CSS: คุณสมบัติ mask-repeat
การอ้างอิง CSS: คุณสมบัติขนาดมาสก์
กวดวิชา CSS: CSS Masking