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>

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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