ویژگی mask-size در CSS

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%;
}

نتیجه: