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

 

 

subtract

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

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

.el {
  mask-composite: subtract;
}

 

 

intersect

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

.el {
  mask-composite: intersect;
}

 

 

exclude

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

.el {
  mask-composite: exclude;
}

 

 

مثال

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

 

 

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

 

 

حال این دو لایه را بصورت زیر برای ماسک کردن تعریف می کنیم و از مقدار 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;
}

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

 

 

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

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

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

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