ویژگی mask-repeat CSS

تعریف و استفاده

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;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.

صفحات مرتبط

آموزش:پوشش CSS

منبع:ویژگی mask CSS

منبع:ویژگی mask-clip CSS

منبع:ویژگی mask-composite CSS

منبع:ویژگی mask-image CSS

منبع:ویژگی mask-mode CSS

منبع:ویژگی mask-origin CSS

منبع:ویژگی mask-position CSS

منبع:ویژگی mask-size CSS

منبع:ویژگی mask-type CSS