ویژگی mask-repeat در CSS

mask-repeat Property

ویژگی mask-repeat در CSS مشخص می کند که تصویر ماسک شده تکرار شود یا خیر. این تکرار می تواند در راستای محور افقی، عمودی و یا هردو اتفاق بیفتد.

نحوه نوشتار

/* مقادیر تکی */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* مقادیر دوتایی */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

مقادیر

repeat​

تصویر ماسک شده در محدوده اندازه تصویر اصلی تا جایی که امکان دارد تکرار می شود. اگر آخرین تصویر بوطر کامل قرار نگیرد، برش می خورد.

space​

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

round​

تصاویر ماسک شده به یکدیگر میچسبند و فضای خالی مابین آنها نیست.

no-repeat​

تصویر ماسک شده تکرار نمی شود و لزوما به ابعاد تمام تصویری که آن را ماسک کرده گسترش نمیابد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<img class="pic1" src="http://my-project.ir/img/desert.jpg"/>
<img class="pic2" src="http://my-project.ir/img/desert.jpg"/>
<img class="pic3" src="http://my-project.ir/img/desert.jpg"/>
<img class="pic4" src="http://my-project.ir/img/desert.jpg"/>
<img class="pic5" src="http://my-project.ir/img/desert.jpg"/>

css

body {
   background-color: beige;
}
img {
   height: 200px;
   mask-image: url(http://my-projecy.ir/img/Polygon.svg);
   -webkit-mask-image: url(http://my-projecy.ir/img/Polygon.svg);
   mask-position: center center;
   -webkit-mask-position: center center;
   mask-size: 30% 30%;
   -webkit-mask-size: 30% 30%;
   margin-right: 30px;
}
.pic1 {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.pic2 {
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
}
.pic3 {
    mask-repeat: space;
    -webkit-mask-repeat: space;
}
.pic4 {
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
}
.pic5 {
    mask-repeat: repeat-y;
    -webkit-mask-repeat: repeat-y;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.