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

คุณสมบัติ mask-repeat กำหนดวิธีการทำซ้ำของมาสก์ หากขนาดของมันเล็กกว่าขนาดขององค์ประกอบ ทำงานคล้ายกับ background-repeat, แต่ใช้กับมาสก์

ไวยากรณ์

cssselector {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

ค่า

ตัวอย่าง . ไม่ทำซ้ำ (no-repeat)

หัวใจเดียวอยู่ตรงกลางไม่ทำซ้ำ:

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

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

Результат:

ตัวอย่าง . ทำซ้ำในแนวนอน (repeat-x)

รูปหัวใจทำซ้ำเฉพาะในแนวนอน:

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

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

Результат:

ตัวอย่าง . ทำซ้ำในแนวตั้ง (repeat-y)

รูปหัวใจทำซ้ำเฉพาะในแนวตั้ง:

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

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

Результат:

ตัวอย่าง . ทำซ้ำโดยมีช่องว่าง (space)

รูปหัวใจกระจายตัวอย่างสม่ำเสมอโดยมีช่องว่าง:

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

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

Результат:

ตัวอย่าง . การทำซ้ำแบบปรับขนาด (round)

รูปหัวใจถูกปรับขนาดเพื่อเติมเต็มพื้นที่อย่างสม่ำเสมอ:

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

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

Результат:

ดูเพิ่มเติม