ماسک‌ها در CSS این امکان رو میدن که بخشی از یک عنصر (عکس، متن، ویدیو، …) دیده بشه و بخش‌های دیگه مخفی بمونه.
یعنی شما می‌تونید با کمک یک تصویر یا گرادینت مشخص کنید که کدوم قسمت‌های عنصر شفاف (transparent) و کدوم قسمت‌ها قابل مشاهده (visible) باشه.

🔹 ویژگی‌های اصلی Mask در CSS

1. mask-image

این ویژگی مشخص می‌کنه چه تصویری به‌عنوان ماسک روی عنصر اعمال بشه.
قسمت‌های سفید / روشن → دیده میشن و قسمت‌های مشکی / تیره → مخفی میشن.

.box {
  width: 300px;
  height: 300px;
  background: url('image.jpg') no-repeat center/cover;
  mask-image: url('mask-shape.png');
  mask-repeat: no-repeat;
  mask-position: center;
}

2. mask-repeat

مشابه background-repeat هست:

• repeat

• no-repeat

• repeat-x

• repeat-y

3. mask-position

جایگاه ماسک رو مشخص می‌کنه (مثل background-position).

4. mask-size

مشابه background-size:

• cover → کل عنصر رو پر می‌کنه.

• contain → درون عنصر جا میشه.

• auto → سایز اصلی ماسک.

5. mask-composite (پیشرفته)

وقتی چند ماسک روی هم استفاده کنیم، نحوه ترکیب شدنشون رو مشخص می‌کنه.
مقادیر: add ، subtract ، intersect ، exclude.

🔹 مثال ساده: ماسک دایره‌ای

.circle-mask {
  width: 300px;
  height: 300px;
  background: url('photo.jpg') no-repeat center/cover;
  mask-image: radial-gradient(circle, #000 70%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: center;
}

🔸 اینجا تصویر داخل یک ماسک دایره‌ای نمایش داده میشه.

🔹 مثال با متن

.text-mask {
  font-size: 100px;
  font-weight: bold;
  background: url('nature.jpg') no-repeat center/cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

(اینجا ماسک شبیه متن عمل می‌کنه و تصویر داخل متن نمایش داده میشه.)

📌 نکات مهم

1. در بعضی مرورگرها (مثل Chrome, Safari) باید از -webkit- prefix استفاده کنید:

   • -webkit-mask-image

   • -webkit-mask-repeat

   • -webkit-mask-size

2. ترکیب mask با gradient یا svg بسیار قدرتمند و کاربردی میشه.