mask-repeat

با استفاده از ویژگی mask-repeat می توان نحوه تکرار شدن یک لایه ماسک را بعد از اینکه اندازه و مکانش تعیین شد کنترل کرد. این ویژگی مشابه ویژگی background-repeat برای یک پس زمینه عمل می کند.

مقادیر ویژگی mask-repeat

mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat

یک لایه ماسک می تواند فقط در جهت افقی تکرار شود یا فقط در جهت عمودی و یا در هر دو جهت و یا در هیچ جهتی تکرار نداشته باشد.

با توجه به این موضوع این ویژگی یک یا دو مقدار می پذیرد. که در صورتی که دو مقدار داشته باشد مقدار اول مربوط به کنترل تکرار در جهت افقی و مقدار دوم در جهت عمودی می باشد. همچنین اگر یک مقدار تعیین شود مرورگر آن مقدار را بصورت خلاصه نویسی در نظر می گیرد که در در مورد این موضوع بحث خواهیم کرد.

همینطور این ویژگی می تواند مجموعه ای از این مقادیر را نیز بپذیرد که مقادیر مختلف برای لایه های مختلف ماسک که توسط ویژگی mask-image تعیین می شوند استفاده می شود و مقادیر توسط ویرگول از هم جدا می شوند.

کلمه کلیدی repeat مقدار اولیه این ویژگی می باشد که باعث می شود تا بصورت پیشفرض لایه ماسک در هر دو جهت تکرار شود.

مثال زیر را در نظر بگیرد که عنصر تصویری برای ماسک کردن و همچنین یک لایه ماسک شبیه به یک گل داریم. با استفاده از این مثال مقادیر مختلف این ویژگی را شرح می دهیم:

img {
  mask-image: url(masklayer.png);
}

 

 

فقط توجه داشته باشید در مثال های زیر ما اندازه لایه ماسک را کمی کوچک تر میکنیم که می توانیم این کار را با کوچک کردن تصویر که برای لایه ماسک کردن استفاده شده است انجام دهیم و یا با استفاده از mask-size این کار را به ثمر برسانیم.

repeat-x

می توان از این کلمه کلیدی بصورت تک مقداری برای ویژگی mask-repeat استفاد کرد که باعث می شود لایه ماسک فقط در جهت محور افقی X تکرار شود.

img {
  mask-image: url(masklayer.png);
  mask-repeat: repeat-x;
}

واضح است که این مقدار برابر با جفت مقدار زیر است:

img {
  mask-repeat: repeat no-repeat;
}

در هر صورت نتیجه بصورت زیر خواهد شد:

 

 

repeat-y

می توان از این کلمه کلیدی بصورت تک مقداری برای ویژگی mask-repeat استفاد کرد که باعث می شود لایه ماسک فقط در جهت محور عمودی Y تکرار شود.

img {
  mask-image: url(masklayer.png);
  mask-repeat: repeat-y;
}

واضح است که این مقدار برابر با جفت مقدار زیر است:

img {
  mask-repeat: no-repeat repeat;
}

نتیجه بصورت زیر خواهد شد:

 

 

repeat

می توان از این کلمه کلیدی بصورت تک مقداری برای ویژگی mask-repeat استفاد کرد که باعث می شود لایه ماسک در هر دو جهت افقی و عمودی تکرار شود:

img {
  mask-image: url(masklayer.png);
  mask-repeat: repeat;
}

این مقدار برابر با جفت مقدار زیر است:

img {
  mask-repeat: repeat repeat;
}

نتیجه :

 

 

space

این مقدار باعث می شوند تا لایه ماسک به تعدادی که در عنصر جا می شود تکرار شود و فضاهای خالی باقی مانده بین تکرارها بصورت مساوی تقسیم می شود. پس در این حالت ما بریدگی برای تکرار ها نخواهیم داشت.

در هر جهتی که از کلمه space استفاده شود ویژگی mask-position نادیده گرفته می شود، مگر اینکه تصویر لایه ماسک به قدری بزرگ باشد که قابل تکرار نباشد که در این صورت موقعیت لایه ماسک را mask-position تعیین می کند.

img {
  mask-image: url(masklayer.png);
  mask-repeat: space;
}

این مقدار برابر با جفت مقدار زیر است:

img {
  mask-repeat: space space;
}

نتیجه :

 

 

round

این مقدار باعث می شود که لایه ماسک با توجه به اندازه اش تا جایی که فضا هست تکرار شود و اگر فضایی باقی ماند تکرارها کشیده می شوند (در جهتی که مشخص شده است) تا اینکه فضاهای خالی پر شوند.

img {
  mask-image: url(masklayer.png);
  mask-repeat: round;
}

این مقدار برابر با جفت مقدار زیر است:

img {
  mask-repeat: round round;
}

نتیجه :

 

 

no-repeat

کلمه no-repeat باعث می شود تا لایه ماسک در هیچ جهتی تکرار نشود و فقط یک بار ظاهر شود.

img {
  mask-image: url(masklayer.png);
  mask-repeat: no-repeat;
}

برابر است با:

img {
  mask-image: url(masklayer.png);
  mask-repeat: no-repeat no-repeat;
}

نتیجه بصورت زیر خواهد بود:

 

 

تعیین این ویژگی برای چند لایه

برای اینکه تکرار را برای چند لایه ماسک تعیین کنیم کافی است بصورت زیر از ویرگول استفاده کنیم:

.element {
  mask-image: url(my-mask.png), linear-gradient(black, white);
  mask-repeat: no-repeat, repeat-x;
}

دمو

دموی زیر را بررسی کنید و مقادیر آن را تغییر دهید:

 

See the Pen mask-repeat by Mojtaba Seyedi (@seyedi) on CodePen.

 

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