ماسک گذاری (Masking)
در «ماسک گذاری CSS» یک لایه ماسک روی عنصر می گذاریم. ماسک یعنی ناحیه ای که بخش هایی را پنهان یا نیمه شفاف می کند. معمولاً با «تصویر ماسک (mask-image)» یا «گرادیان (Gradient)» ساخته می شود.
ماسک گذاری CSS یعنی چه؟
ویژگی mask-image تصویرِ ماسک را تعیین می کند. تصویر ماسک می تواند PNG، SVG، گرادیان CSS یا تگ <mask> در SVG باشد. رنگ تیره تر یعنی شفاف تر؛ بنابراین سیاه یعنی کاملاً شفاف.
مثال 1: تصویر PNG به عنوان ماسک
یک PNG با بخش های شفاف داریم. آن را روی عکس مقصد می گذاریم. سپس تکرار ماسک را می بندیم.
.mask1 {\n -webkit-mask-image: url(w3logo.png);\n mask-image: url(w3logo.png);\n mask-repeat: no-repeat;\n}\nنکته: اگر ماسک یک بار نمایش شود، از no-repeat استفاده کن.
مثال 2: تکرار تصویر ماسک
اگر mask-repeat را حذف کنیم، تصویر ماسک همه جا تکرار می شود.
.mask1 {\n -webkit-mask-image: url(w3logo.png);\n mask-image: url(w3logo.png);\n}\nمثال 3: جایگذاری ماسک با mask-position
با mask-position نقطه شروع ماسک را تعیین می کنیم. مقدار center مرکز را هدف می گیرد.
.mask1 {\n -webkit-mask-image: url(w3logo.png);\n mask-image: url(w3logo.png);\n mask-repeat: no-repeat;\n mask-position: center;\n}\nمراحل عملی
- یک تصویر PNG شفاف آماده کن.
- روی عنصر،
mask-imageرا تنظیم کن. - در صورت نیاز،
mask-repeatرا ببند. - با
mask-positionجای ماسک را دقیق کن.
جمع بندی سریع
mask-imageمنبع ماسک را تعیین می کند.- سیاه یعنی نامرئی؛ روشن تر یعنی نمایان تر.
no-repeatاز تکرار جلوگیری می کند.mask-positionنقطه شروع ماسک است.
مطالب مرتبط: ویژگی object-position و ویژگی object-fit. این دو به برش و قاب بندی بهتر کمک می کنند.