ماسک گذاری با PNG در CSS (Masking - PNG)
در «ماسک گذاری با PNG» می توانید یک لایه ماسک روی عنصر قرار دهید تا بخش هایی از تصویر پنهان شوند. ویژگی mask-image
در CSS تصویر ماسک را مشخص می کند و معمولاً با PNG شفاف یا نیمه شفاف استفاده می شود.
ویژگی mask-image در CSS
ماسک گذاری با PNG زمانی کار می کند که نواحی تیره/شفاف در ماسک داشته باشید. مقدار url(...)
را به mask-image
بدهید و در صورت نیاز پیشوند -webkit-
را بیفزایید.
.mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; }
نکته: مقدار no-repeat
باعث می شود تصویر ماسک تنها یک بار اعمال شود و تکرار نشود.
تکرار و موقعیت ماسک
تکرار پیش فرض ماسک
اگر mask-repeat
را حذف کنید، تصویر ماسک در هر دو محور تکرار می شود.
.mask1-repeat { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); /* mask-repeat حذف شده است */ }
تنظیم موقعیت ماسک با mask-position
برای جابه جایی ماسک از mask-position
استفاده کنید. مقدار center
ماسک را در مرکز قرار می دهد.
.mask1-pos { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; mask-position: center; }
هشدار: برای نتیجه پایدار، اندازه ظرف/تصویر را تعریف کنید و در صورت نیاز از object-fit استفاده نمایید.
خواص ماسک گذاری پرکاربرد
mask-image
: تعیین تصویر ماسک برای عنصر.mask-repeat
: نحوه تکرار تصویر ماسک.mask-position
: موقعیت آغازین تصویر ماسک نسبت به ناحیه ماسک.mask-size
: اندازه تصویر ماسک.
برای جایگذاری محتوای برش خورده می توانید از object-position نیز کمک بگیرید.
منابع و ادامه مطالعه
ماسک گذاری با PNG | اشکال تصویر (clip-path)
MDN: mask-image و MDN: mask-position توضیحات کامل مقادیر و رفتار مرورگرها را ارائه می دهند.