CSS ماسک-ریپیٹ پرپرتی

پچھلے صفحے mask-position
آئندہ صفحہ mask-size

تعریف و کاربرد

mask-repeat تنظیمات ویژگی تصویر ماسک را برای تکرار یا نحوه تکرار تنظیم می‌کند.

به طور پیش‌فرض، تصویر ماسک در جهت عمودی و افقی تکرار می‌شود.

مثال

مثال 1

استفاده mask-repeat: no-repeat; و mask-repeat: repeat;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

آزمایش کنید

مثال 2

استفاده mask-repeat: round; و mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

آزمایش کنید

مثال 3

استفاده mask-repeat: repeat-x; و mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

آزمایش کنید

قوانین CSS

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

مقدار ویژگی

مقدار	توضیح
repeat	تصویر ماسک در جهت عمودی و افقی تکرار می‌شود. اگر تصویر آخر مناسب نباشد، برش داده می‌شود. این مقدار پیش‌فرض است.
repeat-x	تصویر ماسک فقط در جهت افقی تکرار می‌شود.
repeat-y	تصویر ماسک فقط در جهت عمودی تکرار می‌شود.
space	تصویر ماسک تا حد امکان تکرار می‌شود بدون برش. تصویر اول و آخر به ترتیب در دو سمت عنصر ثابت می‌شوند و فضای خالی بین تصاویر به طور یکسان توزیع می‌شود.
round	تصویر ماسک تکرار می‌شود و برای پر کردن فضای خالی فشرده یا کشیده می‌شود (بدون شکاف).
no-repeat	تصویر ماسک تکرار نمی‌شود. تصویر فقط یک بار نمایش داده می‌شود.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit	این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	repeat
وراثت:	خیر
انیمیشن‌سازی:	پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	مодуل ماسک CSS سطح 1
قوانین جاوااسکریپت:	object.style.maskRepeat="no-repeat"