mask-image

از ویژگی mask-image برای تعریف یک یا تعداد بیشتری تصویر به عنوان یک لایه ماسک بر روی یک عنصر HTML یا SVG استفاده می شود.

ماسک کردن چیست؟

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

تصویر زیر ماسک کردن را نمایش می دهد که در اینجا عنصر هدف تصویر سمت چپ می باشد، تصویر وسط همان PNG است که برای ماسک کردن از آن استفاده می شود و تصویر سمت راست عنصر ماسک شده نهایی می باشد:

 

 

سینتکسmask-image

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

.masked-element {
  mask-image: url(mask.png);
}

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

.masked-element {
  mask-image: url(mask1.png), url(mask2.png), url(mask3.png);
}

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

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

.masked-element {
  mask-image: url(mask.svg);
}

همچنین می توان به عنصر <mask> در SVG با استفاده از id آن اشاره کرد و از آن به عنوان لایه ماسک بهره برد:

.masked-element {
  mask-image: url(#mask1);
}

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

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

مقدار none برای این ویژگی نسبت به ویژگی های دیگر متفاوت است. این مقدار به عنوان یک لایه ماسک شفاف (کاملا شیشه ای) در نظر گرفته می شود.

ماسک کردن یک عنصر برای فرزندانش stacking context بوجود می آورد. این یعنی هیچ عنصری بیرون از این عنصر نمی تواند از نظر z-index بین فرزندان این عنصر قرار بگیرد و بالعکس.

مثال ها

در تصویر زیر مشاهده می کنید یک یک عنصر تصویر ساده وجود دارد که با اضافه کردن لایه ماسک به آن به نتیجه مورد نظر می رسیم:

 

 

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

دموی زیر این مثال را بصورت زنده نشان می دهد:

 

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

 

در مثال زیر از یک گرادینت ساده برای لایه ماسک استفاده شده است:

img {
  mask-image: linear-gradient(45deg, black, transparent);
}

 

See the Pen Masking using gradients by Mojtaba Seyedi (@seyedi) on CodePen.

 

در مطالب بعدی با ویژگی های دیگر مربوط به این موضوع که کنترل بیشتری را برای ماسک کردن به ما می دهند آشنا خواهیم شد.

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