زمانی که از عنصر <mask> برای ماسک کردن یک عنصر استفاده می شود ویژگی mask-type تعیین کننده حالت محتوای عنصر <mask> است که از نوع alpha باشد یا luminance.
زمانی که می خواهیم عنصری را در HTML ماسک کنیم (فرض کنید یک عنصر div) نیاز است تا از تصویری به عنوان لایه ماسک استفاده شود. این تصویر می تواند از جنس img و یا گرادینت در سی اس اس باشد. همینطور می توانیم از عنصر <mask> در SVG نیز به عنوان لایه ماسک استفاده کنیم.
حال باید مشخص شود که لایه ماسک از نوع alpha است یا luminance. اگر لایه ماسک از نوع عناصر HTML و CSS باشند مثل img و گرادینت این کار را برای عنصری که در حالت ماسک کردنش هستیم انجام می دهیم (همان div) یعنی به آن عنصر می گوییم که لایه ماسک شما از نوع مثلا alpha در نظر گرفته می شود و این کار را توسط ویژگی mask-mode انجام می دهیم.
اما اگر لایه ماسک از نوع <mask> در SVG باشد می توانیم برای لایه ماسک حالت را مشخص کنیم و این کار توسط ویژگی mask-type انجام می شود.
پس تفاوت ویژگی های mask-mode و mask-type در این است که mask-mode برای عنصری که ماسک می شود تعیین می شود و mask-type به لایه ماسک کننده تعلق می گیرد.
حال سوال پیش می آید اگر هم به عنصر ماسک شونده با mask-mode مقدار دهیم و هم به عنصر ماسک کننده (<mask>) از طریق mask-type مقداری بدهیم چه اتفاقی می افتد؟ (شیطونه میگه همه ماسک ها رو بنویسم ماست!)
در این صورت مقدار mask-mode جایگزین مقدار mask-type می شود.
قبل از هرچیزی توجه داشته باشید که در کل حالت alpha سریع تر توسط مرورگر پیاده می شود و از نظر کارایی بهینه تر از حالت luminance می باشد.
مقادیر ویژگی mask-type
mask-type: alpha | luminance
این ویژگی می تواند چند مقدار بپذیرد که مقادیر مختلف برای لایه های مختلف ماسک که توسط ویژگی mask-image تعیین می شوند استفاده می شود و مقادیر توسط ویرگول از هم جدا می شوند.
ماسک Alpha
تصویر آلفا شامل کانال آلفایی است که اطلاعات پیکسل هایی که شفاف (transparent) هستند را نگهداری می کند. به عنوان مثال تصاویر PNG می توانند از این نوع باشند. حال اگر از حالت alpha برای ماسک کردن استفاده کنیم پیکسل های آلفا به عنوان مقادیر ماسک مورد استفاده قرار می گیرند.
این یعنی هرچه حالت شیشه ای بودن یک قسمت از لایه ماسک بیشتر باشد عنصر زیرین کمتر دیده می شود. پس هرجا از لایه ماسک شیشه ای باشد همان قسمت از لایه زیرین دیده نمی شود و به اصطلاح ماسک می شود.
.masked-element {
mask-image: url(#svgMask);
}
mask {
mask-type: alpha;
}
تصویر زیر این موضوع را به سادگی نمایش می دهد:
همانطور که مشاهده می کنید قسمت های شفاف لایه ماسک باعث مخفی شدن عنصر زیرین خود شدند.
ماسک Luminance
luminance مقدار پیشفرض ویژگی mask-type می باشد.
زمانی که از حالت luminance برای ماسک کردن استفاده کنیم استفاده می کنیم مرورگر اینکه تصمیم بگیرد چه قسمت هایی باید ماسک شود تصویر لایه ماسک را برای خود به حالت خاکستری (gray scale) تبدیل می کند. هرچه قسمت های این لایه روشن تر باشند لایه زیرین بیشتر قابل مشاهده خواهد بود.
در نتیجه سفید یعنی لایه زیرین قابل مشاهده و سیاه یعنی لایه زیرین مخفی شود و قابل مشاهده نباشد. و قسمت های مختلف دیگر که در بین این طیف هستند بصورت نیمه شفاف بنا به مقدار luminanceشان نمایش داده خواهند شود.
همچنین در این موضوع، شفافیت یا همان کانال آلفا نیز به عنوان یک فاکتور و ضریب دخالت دارد. پس اگر آلفا صفر باشد یعنی آن قسمت از تصویر کاملا شیشه ای باشد این یعنی یک ضریب صفر و در نتیجه آن قسمت از لایه ماسک باعث مخفی شدن لایه زیرین خواهد شد. مقادیری غیر از صفر نیز تاثیر خود را خواهند داشت.
.masked-element {
mask-image: url(#svgMask);
}
mask {
mask-type: luminance;
}
تصویر زیر یک مثال ساده از این حالت می باشد:
همانطور که مشاهده می کنید قسمت های شفاف لایه ماسک باعث مخفی شدن عنصر زیرین خود شدند و قسمت های روشن لایه ماسک لایه زیرین را هویدا می کنند.
به عنوان نمونه در مثال زیر برای لایه ماسک از یک عنصر <mask> استفاده می کنیم:
.masked-element {
mask-image: url(#SVGMask);
}
mask {
mask-type: alpha;
}
<mask id="SVGMask" maskContentUnits="objectBoundingBox">
<radialGradient id="radialFill">
<stop stop-color="white" offset="0"/>
<stop stop-color="black" offset="1"/>
</radialGradient>
<circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
</mask>
<img class="masked-element" src="image.jpg" alt="">
پشتیبانی مرورگر ها
در حال حاضر برخی از ویژگی های ماسک کردن در هیچ مرورگری پشتیبانی نمی شود.
سوال داری؟ برو به پنل پرسش و پاسخ