CSS mask-repeatคุณสมบัติ
ตัวอย่าง
การใช้mask-repeat: no-repeat;
และmask-repeat:
repeat;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติmask-repeat
ตั้งค่าว่าภาพมาสก์จะถูกทำซ้ำหรือไม่
ตามค่าเริ่มต้น รูปภาพมาสก์จะทำซ้ำทั้งในแนวตั้งและแนวนอน
ค่าเริ่มต้น: | ทำซ้ำ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.maskRepeat="no-repeat" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Numbers ตามด้วย -webkit- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
mask-repeat | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 3.1 -webkit- | 15.0 -webkit- |
ไวยากรณ์ CSS
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
repeat | The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
repeat-x | The mask image is repeated only horizontally |
repeat-y | The mask image is repeated only vertically |
space | The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images |
round | The mask image is repeated and squished or stretched to fill the space (no gaps) |
no-repeat | The mask image is not repeated. The image will only be shown once |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การใช้mask-repeat: round;
และmask-repeat:
space;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
ตัวอย่าง
การใช้mask-repeat: repeat-x;
และmask-repeat:
repeat-y;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติ mask-image
การอ้างอิง CSS: คุณสมบัติโหมดมาสก์
การอ้างอิง CSS: คุณสมบัติที่มาที่มาสก์
การอ้างอิง CSS: คุณสมบัติตำแหน่งมาสก์
การอ้างอิง CSS: คุณสมบัติขนาดมาสก์
กวดวิชา CSS: CSS Masking