mask-mode

ویژگی mask-mode تعیین کننده حالت تصویر لایه ماسک است که از نوع alpha باشد یا luminance.

مقادیر ویژگی mask-mode

mask-mode: alpha | luminance | match-source

مقدار match-source مقدار اولیه و پیشفرض این ویژگی می باشد.

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

ماسک Alpha

تصویر آلفا شامل کانال آلفایی است که اطلاعات پیکسل هایی که شفاف (transparent) هستند را نگهداری می کند. به عنوان مثال تصاویر PNG می توانند از این نوع باشند. حال اگر از حالت alpha برای ماسک کردن استفاده کنیم پیکسل های آلفا به عنوان مقادیر ماسک مورد استفاده قرار می گیرند.

این یعنی هرچه حالت شیشه ای بودن یک قسمت از لایه ماسک بیشتر باشد عنصر زیرین کمتر دیده می شود. پس هرجا از لایه ماسک شیشه ای باشد همان قسمت از لایه زیرین دیده نمی شود و به اصطلاح ماسک می شود.

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

تصویر زیر این موضوع را به سادگی نمایش می دهد:

 

 

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

ماسک Luminance

زمانی که از حالت luminance برای ماسک کردن استفاده کنیم استفاده می کنیم مرورگر اینکه تصمیم بگیرد چه قسمت هایی باید ماسک شود تصویر لایه ماسک را برای خود به حالت خاکستری (gray scale) تبدیل می کند. هرچه قسمت های این لایه روشن تر باشند لایه زیرین بیشتر قابل مشاهده خواهد بود.

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

همچنین در این موضوع، شفافیت یا همان کانال آلفا نیز به عنوان یک فاکتور و ضریب دخالت دارد. پس اگر آلفا صفر باشد یعنی آن قسمت از تصویر کاملا شیشه ای باشد این یعنی یک ضریب صفر و در نتیجه آن قسمت از لایه ماسک باعث مخفی شدن لایه زیرین خواهد شد. مقادیری غیر از صفر نیز تاثیر خود را خواهند داشت.

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

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

 

 

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

مقدار match-source

این همان مقدار پیشفرض و اولیه این ویژگی می باشد که باعث می شود تا:

اگر لایه ای که توسط ویژگی mask-image تعریف می شود از نوع عنصر <mask> در SVG باشد، ماسک از مقدار ویژگی mask-type عنصر <mask> استفاده کند.

و اگر لایه ای که توسط ویژگی mask-image تعریف می شود از نوع تصویر (تصویر و گرادینت) در CSS باشد، ماسک از مقادیر alpha لایه ماسک استفاده کند.

به عنوان نمونه در مثال زیر برای لایه ماسک از یک عنصر <mask> استفاده می کنیم:

.el {
  mask-image: url(#SVGMask);
  /* mask-mode: match-source; == luminance  نیازی به نوشتن نیز چون مقدار پیشفرض همینه */ 
}

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

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

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