خصائص تكرار القناع في 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;

قيمة الخاصية

القيمة	الوصف
repeat	صورة الشاشة تعيد نفسها في الاتجاهين العمودي والأفقي. إذا كانت الصورة الأخيرة غير مناسبة، سيتم تقطيعها. هذه هي القيمة الافتراضية.
repeat-x	صورة الشاشة تعيد نفسها فقط في الاتجاه الأفقي.
repeat-y	صورة الشاشة تعيد نفسها فقط في الاتجاه العمودي.
space	صورة الشاشة تعيد نفسها إلى أقصى حد ممكن دون تجزئة. الصورة الأولى والصورة الأخيرة تُثبتان على جانبي العنصر، وتوزع الفراغات بين الصور بشكل متساوٍ.
round	صورة الشاشة تعيد نفسها وتضخم أو تمدد لتملأ المساحة (بدون فجوات).
no-repeat	صورة الشاشة لا تعيد نفسها. ستعرض الصورة مرة واحدة فقط.
initial	ضع هذا الخاصية في قيمتها الافتراضية. يرجى الرجوع إلى initial.
inherit	يرث هذا الخاصية من عنصر الأب. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية:	repeat
التنحيب:	لا
تحريك الصناعة:	غير مدعوم. يرجى الرجوع إلى:خصائص تحريك.
الإصدار:	مستوى 1 لمodule CSS Masking
جافا سكربت الجملة：	object.style.maskRepeat="no-repeat"