mask-size

ویژگی mask-size اندازه لایه ماسکی که توسط ویژگی mask-image تعیین شده است را تنظیم می کند.

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

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

 

 

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

مقادیری که این ویژگی می پذیرد شامل کلمات کلیدی contain, cover و همچنین از مقادیر طولی و درصد نیز می توان برای تعیین اندازه لایه ماسک در این ویژگی استفاده کرد. مقدار اولیه و پیشفرض این ویژگی auto می باشد.

.examples {
  mask-size: cover; 
  mask-size: contain; 
  mask-size: 100% 50%;
  mask-size: 300px 200px;
  mask-size: 50% auto;
}

در مقداردهی دوتایی، مقدار اول مربوط به عرض و مقدار دوم مربوط به ارتفاع لایه ماسک می باشد. همچنین وقتی از یک مقدار استفاده می کنیم مرورگر مقدار دوم را همیشه auto در نظر می گیرد.

مقادیر این ویژگی کاملا مشابه background-size می باشد.

واحدهای طولی

با استفاده از هریک از واحدهای طولی می توان برای عرض و ارتفاع لایه ماسک اندازه تعیین کرد:

  mask-size: 100px 200px;
  mask-size: 20em; /* عرض و ارتفاع برابر می شود. */

به عنوان مثال برای تغییر اندازه عرض و ارتفاع ماسک در مثال بالا به مقدار 300 پیکسل بصورت زیر عمل می کنیم:

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

  mask-size: 300px;
}

در نتیجه داریم:

 

 

درصدی

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

مقادیر منفی نامعتبر هستند.

  mask-size: 90% 50%;
  mask-size: 100%;

contain

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

  mask-size: contain;

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

cover

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

  mask-size: cover;

auto

مقدار auto مقدار اولیه یا پیشفرض ویژگی mask-size است که باعث می شود تا لایه ماسک اندازه اولیه و ذاتی خود را داشته باشد. یعنی ابعاد فایل تصویر هرچه که هست به همان اندازه رسم خواهد شد.

حال اگر تصویری داشتیم که ابعاد ذاتی نداشت (مثل گرادینت ها) در این موارد اگر از کلمه کلیدی auto در هر بعد لایه ماسک استفاده شود، آن بعد به اندازه کل همان بعد لایه قرارگیری ماسک رسم خواهد شد.

نکات مهم

زمانی که برای این ویژگی از دو مقدار استفاده می کنیم و یکی از این مقادیر طولی/درصدی و دیگری auto هستند:

– اگر تصویر لایه ماسک تناسب عرض و ارتفاع ذاتی داشته باشد عرض یا ارتفاع آن بنا به مقدار طولی/درصدی تعیین می شود و بعد دیگر آن که با کلمه auto تنظیم شده است بنا به نسبت ذاتی تصویر اندازه اش تعیین می شود.

– اگر تصویر لایه ماسک تناسب عرض و ارتفاع ذاتی نداشته باشد (تصاویر برداری می توانند اینگونه باشند) عرض یا ارتفاع آن بنا به مقدار طولی/درصدی تعیین می شود و بعد دیگر آن که با کلمه auto تنظیم شده است برابر با اندازه ذاتی آن بعد تصویر خواهد شد.
حال اگر تصویر اندازه ذاتی نداشت (مثل گرادینت ها) اندازه آن بعد لایه ماسک برابر با اندازه همان بعد ناحیه قرارگیری ماسک خواهد شد.

– اگر تصویر ابعاد ذاتی نداشته باشد اما نسبتی ابعادی ذاتی داشته باشد، نتیجه برابر با حالت contain خواهد بود.

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

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

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

.element {
    mask-image: url(first-mask.png), url(second-mask.png);
    mask-size: 100px auto, contain;
}

دمو

دموی زیر را بررسی کنید و مقادیر آن را برای ویژگی mask-size تغییر دهید:

 

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

 

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