คุณสมบัติ mask-size

คุณสมบัติ mask-size กำหนดขนาดของรูปภาพมาสก์ สามารถกำหนดขนาดที่เฉพาะเจาะจงเป็นพิกเซล/เปอร์เซ็นต์ หรือใช้คำสำคัญ cover และ contain

ไวยากรณ์

cssselector {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

ค่า

ตัวอย่าง . ขนาด cover

มาสก์ถูกปรับขนาดเพื่อปิดคลุมองค์ประกอบทั้งหมด:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
}

Результат:

ตัวอย่าง . ขนาด contain

มาสก์ถูกปรับขนาดให้พอดีภายในองค์ประกอบทั้งหมด:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

ตัวอย่าง . ขนาดคงที่เป็นพิกเซล

มาสก์ขนาด 150×150 พิกเซล:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

ตัวอย่าง . ขนาดเป็นเปอร์เซ็นต์

มาสก์ครอบคลุม 80% ของความกว้างและ 60% ของความสูงขององค์ประกอบ:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 80% 60%;
  mask-repeat: no-repeat;
}

Результат:

ตัวอย่าง . ขนาดต่างกันตามแกน

มาสก์กว้าง 200px และสูง 100px:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px 100px;
  mask-repeat: no-repeat;
}

Результат:

ดูเพิ่มเติม