คุณสมบัติ mask-size
คุณสมบัติ mask-size กำหนดขนาดของรูปภาพมาสก์ สามารถกำหนดขนาดที่เฉพาะเจาะจงเป็นพิกเซล/เปอร์เซ็นต์ หรือใช้คำสำคัญ cover และ contain
ไวยากรณ์
selector {
mask-size: auto | <length> | <percentage> | cover | contain;
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
auto |
ขนาดดั้งเดิมของรูปภาพ (ค่าเริ่มต้น) |
cover |
ปรับขนาดมาสก์โดยรักษาสัดส่วน เพื่อให้ปิดคลุมองค์ประกอบทั้งหมด |
contain |
ปรับขนาดมาสก์โดยรักษาสัดส่วน เพื่อให้พอดีภายในองค์ประกอบทั้งหมด |
100px 50px |
ขนาดที่เฉพาะเจาะจงเป็นพิกเซล |
50% 100% |
ขนาดเป็นเปอร์เซ็นต์ของขนาดองค์ประกอบ |
ตัวอย่าง . ขนาด cover
มาสก์ถูกปรับขนาดเพื่อปิดคลุมองค์ประกอบทั้งหมด:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
ตัวอย่าง . ขนาด contain
มาสก์ถูกปรับขนาดให้พอดีภายในองค์ประกอบทั้งหมด:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
ตัวอย่าง . ขนาดคงที่เป็นพิกเซล
มาสก์ขนาด 150×150 พิกเซล:
<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;
}
:
ตัวอย่าง . ขนาดเป็นเปอร์เซ็นต์
มาสก์ครอบคลุม 80% ของความกว้างและ 60% ของความสูงขององค์ประกอบ:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
ตัวอย่าง . ขนาดต่างกันตามแกน
มาสก์กว้าง 200px และสูง 100px:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
ดูเพิ่มเติม
-
คุณสมบัติ
mask-position,
กำหนดตำแหน่งของมาสก์ -
คุณสมบัติ
mask-repeat,
กำหนดการซ้ำของมาสก์ -
คุณสมบัติ
mask,
ตัวย่อสำหรับคุณสมบัติการทำมาสก์ทั้งหมด
