CSS – ماسک‌ها (Masking)

با استفاده از ماسک کردن در 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>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.