mask-size Property
ویژگی mask-size
در CSS سایز تصویر ماسک شده را مشخص می کند.
نحوه نوشتار
mask-size: cover; mask-size: contain; mask-size: 50%; mask-size: 3em; mask-size: 12px; mask-size: auto; mask-size: 50% auto; mask-size: 3em 25%; mask-size: auto 6px; mask-size: auto auto;
مقادیر
طول
با استفاده از واحد های اندازه در css ابعاد تصویر ماسک شده را مشخص میکند.
درصد
با استفاده از درصد ابعاد تصویر ماسک شده را مشخص می کند که در این حالت درصدی از طول یا عرض یا هر دوی تصویری که ماسک خواهد شد در نظر گرفته می شود.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<img class="pic1" src="http://my-project.ir/img/desert.jpg" alt="" /> <img class="pic2" src="http://my-project.ir/img/desert.jpg" alt="" />
css
.pic1 { height: 250px; mask-image: url(http://my-project.ir/img/sun.svg); -webkit-mask-image: url(http://my-project.ir/img/sun.svg); mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 30%; -webkit-mask-size: 30%; } .pic2 { height: 250px; mask-image: url(http://my-project.ir/img/sun.svg); -webkit-mask-image: url(http://my-project.ir/img/sun.svg); mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
نتیجه:

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