mask-composite

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

وقتی از چند لایه ماسک استفاده می کنیم باید مرورگر قادر باشد تا تصمیم بگیرد کدام قسمت های عنصر ماسک شود و کدام پنهان شود. برای این کار با توجه به ویژگی mask-composite لایه های ماسک را با هم ترکیب می کند و شکل نهایی که بوجود می آید را به عنوان عامل ماسک نهایی اعمال می کند.

وقتی که برای یک لایه از ویژگی mask-composite استفاده می کنیم به آن لایه Source یا منبع و به لایه زیرین آن destination یا هدف می گوییم.

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

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

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

مقادیر مختلفی که این ویژگی می پذیرد به شرح زیر هستند که در میان آنها add مقدار اولیه و پیشفرض این ویژگی می باشد.


mask-composite: add | subtract | intersect | exclude

دو لایه ماسک با اشکال زیر را در نظر بگیرید:

 

لایه ماسک دایره شکل
لایه ماسک دایره شکل

 

 

لایه ماسک مربع شکل
لایه ماسک مربع شکل

 

حال با استفاده از ویژگی mask-image این دو لایه را برای ماسک کردن یک عنصر تعریف می کنیم:


.element {
  mask-image: url(circle.svg), url(square.svg);
}

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

add

همانطور که از نام این مقدار پیداست، باعث می شود تا لایه ماسک منبع (در اینجا دایره) روی لایه زیرین رسم شود و ترکیب آنها لایه ماسک نهایی را بوجود می آورد.


.el {
  mask-composite: add;
}

 
 استفاده از ویژگی mask-composite در ماسک کردن عناصر در css
 

subtract

مقدار subtract که در نقطه مقابل مقدار add قرار دارد باعث می شود تا ترکیب نهایی آن قسمتی از لایه ماسک منبع باشد که با لایه هدف اشترک ندارد.

به عبارت دیگر لایه هدف از لایه منبع منها می شود.


.el {
  mask-composite: subtract;
}

 
 استفاده از ویژگی mask-composite در ماسک کردن عناصر در css
 

intersect

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


.el {
  mask-composite: intersect;
}

 
 استفاده از ویژگی mask-composite در ماسک کردن عناصر در css
 

exclude

مقدار exclude برخلاف مقدار intersect از قسمتی استفاده می کند که دو لایه با هم اشتراک ندارند.


.el {
  mask-composite: exclude;
}

 
 استفاده از ویژگی mask-composite در ماسک کردن عناصر در css
 

مثال

تصویر زیر را به عنوان یک عنصر HTML در اختیار داریم:

 
مثال mask-composite
 

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

 

 

حال این دو لایه را بصورت زیر برای ماسک کردن تعریف می کنیم و از مقدار exclude برای ویژگی mask-composite استفاده می کنیم:


img {
    mask-image: url(mask-image.png), url(splatter.png);
    mask-position: center center, bottom right;
    mask-repeat: no-repeat, no-repeat;
    mask-size: 350px 350px, 350px 350px;
    mask-composite: exclude;
}

خروجی بصورت زیر خواهد بود:

 
استفاده از ویژگی mask-composite برای ترکیب لایه های ماسک در سی اس اس
 

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


img {
  mask-image: url(first.png), url(second.png), url(third.png);
  mask-composite: exclude, add;
}

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

در حال حاضر برخی از ویژگی های ماسک کردن در هیچ مرورگری پشتیبانی نمی شود.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *