mask-repeat ගුණය

mask-repeat ගුණය මගින් මුහුණතක් මූලද්‍රව්‍යයේ මානයන්ට වඩා කුඩා වන විට එය පුනරාවර්තනය කරන ආකාරය නියම කරයි. background-repeat ගුණයට සමානව ක්‍රියා කරයි, නමුත් මුහුණත් වලට අදාළ වේ.

වාක්‍ය රටාව

cssතෝරන්නා {
  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;
}

Результат:

තවද බලන්න