ماسک در CSS
Optional Advanced تازه ستون روزنامه را ریخت. این جلسه ابزار دیگری است: ماسک. روی یک جعبه شابلون می‌گذارید. جایی که شابلون پر است عکس یا رنگ دیده می‌شود. جایی که خالی است همان جعبه ناپدید می‌شود. اینجا مقاله را به چند جریان نمی‌شکنید، و تکهٔ آیکن را روی شیت اسپرایت هم جابه‌جا نمی‌کنید.
جواب مستقیم
ماسک در CSS یعنی بخشی از عنصر را با mask-image پنهان کنید — PNG، SVG، یا گرادیان. مثل رنگ‌پاش از پشت برش. mask-size و mask-repeat و mask-position شبیه لایهٔ پس‌زمینه کار می‌کنند: cover، no-repeat، center. mask-mode انتخاب می‌کند آلفا (شفافیت فایل ماسک) یا روشنایی (روشن در برابر تیره). وقتی لبه باید محو شود ماسک بگذارید. وقتی دایره یا چندضلعی تیز می‌خواهید clip-path. برچسب و دکمه را کامل دیده نگه دارید.
چرا ماسک نه ستون است نه اسپرایت
چندستونه یک جریان متن را تکه می‌کند. شیت اسپرایت با background-position یک بیت‌مپ را می‌بُرد تا چند آیکن یک فایل سهم شوند. ماسک هیچ‌کدام نیست. عنصر همان جعبه را اشغال می‌کند. عرض و ارتفاع چیدمان جمع نمی‌شود. فقط عوض می‌شود کدام پیکسل‌های همان جعبه رنگ شوند. فیلتر (blur()، grayscale()) ظاهر پیکسل‌های دیدنی را عوض می‌کند؛ ماسک تصمیم می‌گیرد کدام پیکسل بماند.
PNG به‌عنوان شابلون
mask-image همان‌طور url(...) می‌گیرد که background-image. PNG ماسک معمولاً سفید (یا مات) است جایی که عکس را می‌خواهید، و شفاف جایی که سوراخ می‌خواهید:
.hero-photo {
width: 20rem;
height: 12rem;
background: url("/img/studio.jpg") center / cover no-repeat;
mask-image: url("/img/soft-blob.png");
mask-size: cover;
mask-repeat: no-repeat;
}
عکس هنوز پس‌زمینه است (یا <img> با همان ماسک). PNG لکه فقط شابلون است. اگر فایل ماسک نباشد، کل عنصر ممکن است غیب شود — یک استایل بدون ماسک برای پشتیبان بگذارید، یا URL را تست کنید.
محو شدن با گرادیان
لازم نیست فایل دوم. گرادیان ماسک همان محو پایین کارت است که هر روز می‌بینید:
.card-lead {
mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-repeat: no-repeat;
}
سیاه (یا کاملاً مات) محتوا را نگه می‌دارد؛ transparent سوراخ می‌زند. گرادیان داخل CSS است؛ درخواست HTTP اضافه ندارد — برخلاف شیت اسپرایت آیکن. این هنوز opacity روی کل کارت نیست: متن در بخش توپر تیز می‌ماند؛ فقط ناحیهٔ ماسک‌شده حل می‌شود.
اندازه، تکرار، جا
ماسک را مثل لایهٔ پس‌زمینه‌ای ببینید که هیچ‌وقت به‌عنوان عکس دیده نمی‌شود:
.badge {
mask-image: url("/img/star-mask.svg");
mask-size: 4rem 4rem;
mask-repeat: no-repeat;
mask-position: center;
}
mask-size: cover جعبه را پر می‌کند؛ contain نسبت شابلون را نگه می‌دارد؛ طول مشخص شکل کوچک را قفل می‌کند. repeat شابلون را کاشی می‌کند (کم پیش می‌آید و زود شلوغ می‌شود). میان‌بر mask هست، ولی تا وقتی لایه شبیه background جا بیفتد longhand آرام‌تر است.
آلفا در برابر روشنایی
mask-mode می‌پرسد: «شفافیت را بخوانم، یا روشنایی را؟»
.portrait {
mask-image: url("/img/gray-sculpt.jpg");
mask-mode: luminance;
mask-size: cover;
}
alpha (اغلب پیش‌فرض PNG شفاف) کانال آلفای ماسک را می‌خواند. luminance روشن و تیره را: سفید معمولاً نشان می‌دهد، سیاه معمولاً پنهان — وقتی شابلون عکس خاکستری است نه PNG شفاف. اگر ماسک JPEG «هیچ کار نمی‌کند»، احتمالاً luminance کم بوده. روی SVG عنصر <mask> ویژگی mask-type هم هست؛ روی جعبهٔ HTML از mask-mode شروع کنید.
برش تیز در برابر ماسک نرم
clip-path هندسه می‌بُرد: دایره، inset، چندضلعی. لبه تیز است. ماسک می‌تواند نرم باشد. دو اسم برای یک ویژگی نیستند:
.avatar {
clip-path: circle(50%);
}
.poster {
mask-image: radial-gradient(circle, #000 55%, transparent 80%);
mask-repeat: no-repeat;
}
آواتار و بلیت اغلب clip-path می‌خواهند. پوستر قهرمان که در صفحه حل می‌شود گرادیان ماسک می‌خواهد. می‌شود جفت کرد، ولی هر ویژگی یک کار آرام‌تر است. overflow: hidden با border-radius ابزار سوم است: فرزندان را به جعبه می‌بُرد. ماسک خود عنصر را رنگ می‌کند، از جمله پس‌زمینه‌اش، بدون اینکه جعبهٔ چیدمان گرد شود.
سافاری و پیشوند WebKit
بعضی نسخه‌های Safari هنوز کنار ویژگی استاندارد، -webkit-mask-image (و دوستانش) می‌خواهند:
.fade-photo {
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
خط پیشوند و خط استاندارد را با هم بگذارید. تا ابد فقط پیشوند نفرستید. @supports می‌تواند اضافه‌ها را بپوشاند؛ عادت این است: محو را در Safari هم ببینید، نه فقط در Chromium.
ماسک در برابر برش در برابر overflow در برابر اسپرایت
📊 Mask vs clip-path vs overflow vs sprites
| Tool | Job | Poor fit |
|---|---|---|
mask-image / mask-mode |
Soft holes, fades, shaped photos on one element | Hiding a whole form; replacing column layout |
clip-path |
Hard circle, polygon, inset silhouette | Soft dissolves; newspaper columns |
overflow: hidden |
Clip descendants to the box (often with radius) | Painting a gradient stencil on the element’s own pixels |
Sprites (background-position) |
Many icon tiles from one bitmap | Stenciling a hero photo; flowing article text |
Multi-column (column-*) |
Newspaper fill of one text stream | Visibility holes in a picture |
Optional Advanced اسپرایت را برای آیکن گذاشت و ستون را برای نثر. ماسک همان شابلون است. هر سه روی یک قهرمان یعنی عکسی که هم مثل اسپرایت بریده شده هم مثل ستون تکه شده.
چه چیزی را ماسک نکنید
ماسک را برای «جمع‌کردن» چیدمان شلوغ استفاده نکنید. اگر دکمه یا برچسب زیر محو باشد، کسی نمی‌خواند و نمی‌زند. صفحه‌خوان ممکن است متن را بگوید در حالی که چشم چیزی نمی‌بیند — باگ است، قابلیت نیست. کنتراست در بخش دیدنی هنوز مهم است. عکس تزیینی، کارت، آیکن هدف معمولی‌اند؛ فیلد ورود نه.
.ok-art {
mask-image: linear-gradient(to right, #000, transparent);
}
.not-a-layout-fix {
/* don't: mask the entire toolbar because it overflowed */
}
.icons {
/* sprites still use background-position — not mask-image */
background-image: url("/img/icons.png");
background-position: 0 -32px;
}
اگر بچه از کارت بیرون زده، overflow (یا بچهٔ کوچک‌تر) درست چیدمان است. اگر دوازده فایل HTTP آیکن دارید، اسپرایت یا مجموعهٔ SVG درست دارایی است. ماسک جای هیچ‌کدام نیست.
خودتان امتحان کنید
- به یک جعبهٔ رنگی
mask-image: linear-gradient(to bottom, #000 50%, transparent)بدهید و پایین را ببینید که حل می‌شود. - شابلون کوچک SVG یا PNG بگذارید؛
mask-sizeوmask-position: center. - روی ماسک JPEG خاکستری
mask-mode: luminanceرا باalphaروی PNG شفاف مقایسه کنید. - همان دایره را با
clip-path: circle(50%)بگذارید — لبهٔ تیز را ببینید. - همان گرادیان را با
-webkit-mask-imageهم بنویسید. فرم را ماسک نکنید.
اشتباه‌های رایج
- ماسک به‌جای چیدمان صفحه یا به‌جای
overflow: hidden - فراموش کردن
mask-sizeتا شابلون ریز گوشه بماند - انتظار سوراخ از ماسک JPEG بدون
mask-mode: luminance - ننوشتن
-webkit-mask-imageو مقصر دانستن «ماسک CSS» در Safari - یکی دانستن
clip-pathوmask-image - ماسک برچسب، توضیح، یا دکمه تا کنتراست و هدف کلیک بمیرد
- قاطی با اسپرایت (آفست کاشی) یا چندستونه (جریان متن)
خلاصه
- ماسک شابلون یک عنصر است: اینجا نشان بده، آنجا پنهان
mask-imageآدرس یا گرادیان می‌گیرد؛ اندازه و تکرار و جا شبیه پس‌زمینه استmask-mode: آلفا در برابر روشناییclip-pathبرش هندسی تیز است؛ ماسک می‌تواند محو شود- برای Safari پیشوند؛ رابط ضروری را ماسک نکنید
- Optional Advanced بعدی: رابط کاربری (
user-interface)
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود