ویژگی mask
از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان تمام ویژگی های مربوط به ماسک کردن یک عنصر را با یک اعلان مقدار دهی کرد. همچنین می توان با استفاده از یک ویرگول چند سری مقدار برای این ویژگی تعریف کرد که هر کدام مربوط به یک لایه ماسک مجزا خواهند بود.
ویژگی هایی که می توانند توسط ویژگی mask
مقدار دهی شوند به شرح زیر می باشند:
⚠ اگر در زمان استفاده از mask
فقط تعدادی از ویژگی های مربوط به ماسک کردن را تعیین کنیم، این ویژگی باعث می شود تا مقادیر تمام ویژگی هایی که مقدار نگرفته اند به مقدار initial یا اولیه خود ریست شوند.
فرض کنید فقط تصویر لایه ماسک را توسط این ویژگی تعریف کنیم:
.masked-element {
mask: url(mask.png);
}
در اینجا چون بقیه ویژگی ها مقداری برایشان تعریف نشده است اگر قبل از این اعلان هم تعریف شده باشند همه به حالت اولیه خود ریست می شوند، در واقع اعلان بالا برابر با این است:
.masked-element {
mask: url(mask.png);
mask-mode: match-source; /* initial value */
mask-position: 0% 0%; /* initial value */
mask-size: auto; /* initial value */
mask-repeat: repeat; /* initial value */
mask-origin: border-box; /* initial value */
mask-clip: border-box; /* initial value */
mask-composite: add ; /* initial value */
}
همچنین این ویژگی مقدار mask-border
را نیز به مقدار اولیه آن ریست می کند.
⚠ ترتیب نوشتن ویژگی ها می تواند متفاوت باشد اما نکته مهمی که باید توجه کنیم این است که mask-size
حتما باید بعد از mask-position
باشد و حتما باید یک اسلش بین آنها قرار بگیرد:
.masked-element {
mask: url(mask.png) luminance 50% 50% / contain no-repeat border-box;
}
به عبارت دیگر هیچگاه نمی شود به تنهایی mask-size
را توسط این ویژگی مقداردهی کرد باید حتما mask-position
را هم قبل از آن مقداردهی کنیم.
⚠ همانطور که می دانید مقادیر mask-clip
و mask-origin
یکسان و مشابه می باشند. حال اگر در زمان مختصر نویسی مثلا فقط یک مقدار padding-box
تعریف کنیم، مربوط به کدام یک از این ویژگی ها خواهد بود؟
اگر فقط یک مقدار تعریف شود آن مقدار برای هر دو ویژگی تنظیم می شود و اگر دو مقدار تعریف شود مقدار اول مربوط به mask-origin
و مقدار دوم مربوط به mask-clip
خواهد بود.
⚠ همانطور که گفته شد می توان توسط این ویژگی برای چند لایه ماسک مقدار تعریف کرد که هر لایه را با استفاده از ویرگول از لایه دیگر جدا می کنیم:
.masked-element {
mask: url(my-mask.png) alpha center no-repeat exclude, linear-gradient(black, transparent);
}
پشتیبانی مرورگر ها
در حال حاضر برخی از ویژگی های ماسک کردن در هیچ مرورگری پشتیبانی نمی شود.
سوالت رو توی پنل بحث و گفتگو مطرح کن.