آموزش ماسک گذاری PNG در CSS

استفاده از ویژگی mask-image در CSS

ماسک گذاری در CSS به ما امکان می دهد تا یک لایه ی ماسک روی یک عنصر ایجاد کنیم که تاحدی یا کاملاً بخش هایی از آن عنصر را پنهان کند. با استفاده از ویژگی mask-image در CSS می توانیم یک تصویر را بعنوان لایه ی ماسک مشخص کنیم. این تصویر می تواند به صورت یک تصویر PNG یا یک گرادینت سی اس اس(CSS gradient) یا یک عنصر <mask> در  SVG باشد. 

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

برای استفاده از یک تصویر PNG بعنوان لایه ی ماسک، از یک مقدار url() برای پاس دادن تصویر لایه ی ماسک استفاده کنید. تصویر ماسک نیاز دارد یک ناحیه ی شفاف(transparent) یا نیمه شفاف داشته باشد. رنگ مشکی(Black) به صورت کاملاً شفاف در نظر گرفته می شود. در زیر، تصویر ماسک(w3logo.png) که می خواهیم از آن استفاده کنیم را مشاهده می کنید:

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

حالا، تصویر ماسک را بعنوان لایه ی ماسک برای تصویری ساحل در ایتالیا اعمال می کنیم:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

ویژگی mask-image تصویری را مشخص می کند که از آن بعنوان لایه ی ماسک، برای یک عنصر استفاده می شود. ویژگی mask-repeat مشخص می کند که یک تصویر ماسک چگونه باید تکرار شود. مقدار no-repeat مشخص می کند که تصویر ماسک نباید تکرار شود(یعنی تصویر ماسک تنها یک بار نمایش داده می شود). 

تکرار کردن تصویر لایه ماسک

اگر ما ویژگی mask-repeat را از قلم بیندازیم، تصویر ماسک روی تمام تصویر ساحل تکرار می شود:

 <script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script> 

موقعیت دهی به لایه ی ماسک

ویژگی mask-position موقعیت شروع یک تصویر ماسک را تنظیم می کند(نسبت به ناحیه ی موقعیت ماسک). به طور پیش فرض، یک تصویر ماسک در گوشه ی بالا و سمت چپ از یک عنصر قرار می گیرد و به صورت افقی و عمودی تکرار می شود. در اینجا، تصویر ماسک در وسط قرار دارد:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
  mask-position: center;
}

تمام ویژگی های ماسک کردن در CSS

در جدول زیر، لیست تمام ویژگی های ماسک آورده شده است: