با استفاده از ماسک کردن در CSS، می‌توانید لایه‌ای را به عنوان ماسک روی یک عنصر قرار دهید تا بخش‌هایی از آن را به‌طور کامل یا جزئی مخفی کنید.
خاصیت mask-image در CSS
خاصیت mask-image در CSS برای مشخص کردن یک تصویر به عنوان لایه ماسک استفاده می‌شود.
تصویر ماسک می‌تواند یک تصویر PNG، تصویر SVG، گرادیان CSS یا یک عنصر <mask> در SVG باشد.
پشتیبانی مرورگرها
جدول زیر نسخه‌های مرورگرهایی را که از خاصیت mask-image پشتیبانی می‌کنند نشان می‌دهد:
| خاصیت | Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|---|
| mask-image | 120 | 120 | 53 | 15.4 | 15 |
استفاده از تصویر به عنوان لایه ماسک
برای استفاده از یک تصویر PNG یا SVG به عنوان لایه ماسک، از مقدار url() برای مشخص کردن تصویر ماسک استفاده کنید.
تصویر ماسک باید دارای بخش‌های شفاف یا نیمه‌شفاف باشد. ناحیه‌های سیاه رنگ کاملاً شفاف در نظر گرفته می‌شوند.
مثال:
تصویر زیر (یک تصویر PNG) به عنوان ماسک برای یک تصویر از Cinque Terre در ایتالیا استفاده می‌شود:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-repeat: no-repeat;
}توضیح مثال
- خاصیت
mask-imageتصویر مورد استفاده به عنوان لایه ماسک را مشخص می‌کند. - خاصیت
mask-repeatمشخص می‌کند که آیا تصویر ماسک تکرار شود یا خیر. مقدارno-repeatنشان می‌دهد که تصویر ماسک تکرار نمی‌شود.
استفاده از گرادیان به عنوان لایه ماسک
گرادیان‌های خطی و شعاعی CSS نیز می‌توانند به عنوان تصویر ماسک استفاده شوند.
مثال: گرادیان خطی
در اینجا از یک گرادیان خطی به عنوان لایه ماسک برای تصویر استفاده می‌کنیم. این گرادیان از بالا (سیاه) به پایین (شفاف) می‌رود:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}مثال: گرادیان شعاعی (دایره‌ای)
در اینجا از یک گرادیان شعاعی به شکل دایره به عنوان لایه ماسک استفاده می‌کنیم:
.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}استفاده از SVG به عنوان لایه ماسک
عنصر <mask> در SVG می‌تواند برای ایجاد افکت‌های ماسک روی یک گرافیک SVG استفاده شود.
مثال: لایه ماسک SVG به شکل مثلث
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>مثال: لایه ماسک SVG به شکل ستاره
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام