คุณสมบัติ mask-position
คุณสมบัติ mask-position กำหนดตำแหน่งเริ่มต้นของมาสก์สัมพันธ์กับองค์ประกอบ
ทำงานคล้ายกับ background-position แต่ใช้กับมาสก์
ไวยากรณ์
selector {
mask-position: <position>;
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
top left |
ที่มุมซ้ายบน (ค่าเริ่มต้น) |
center |
กึ่งกลางองค์ประกอบ |
50% 50% |
เหมือนกับ center |
right bottom |
ที่มุมขวาล่าง |
100px 200px |
พิกัดที่เจาะจงเป็นพิกเซล |
ตัวอย่าง . การจัดตำแหน่งมาสก์กึ่งกลาง
มาสก์รูปหัวใจอยู่กึ่งกลางภาพ:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
ตัวอย่าง . มุมซ้ายบน
มาสก์ที่มุมซ้ายบน:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
ตัวอย่าง . มุมขวาล่าง
มาสก์ที่มุมขวาล่าง:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
ตัวอย่าง . พิกัดที่แน่นอน
มาสก์ถูกวางตำแหน่งด้วยพิกัดที่แน่นอน:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
ตัวอย่าง . การจัดตำแหน่งด้วยเปอร์เซ็นต์
การจัดตำแหน่งมาสก์โดยใช้เปอร์เซ็นต์:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
ดูเพิ่มเติม
-
คุณสมบัติ
mask-size,
กำหนดขนาดของมาสก์ -
คุณสมบัติ
mask-origin,
กำหนดจุดอ้างอิงสำหรับการจัดตำแหน่ง -
คุณสมบัติ
mask,
คำสั่งรวมสำหรับคุณสมบัติการมาสก์ทั้งหมด
