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 پشتیبانی می کنند.