mask

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

ویژگی هایی که می توانند توسط ویژگی mask مقدار دهی شوند به شرح زیر می باشند:

• mask-image
• mask-mode
• mask-position
• mask-size
• mask-repeat
• mask-origin
• mask-clip
• mask-composite

⚠ اگر در زمان استفاده از 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);
}

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

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