📌 این ویژگی مشخص می‌کنه که شفافیت پس‌زمینه پشت یک عنصر چقدر باشد.

در Tailwind از کلاس‌های backdrop-opacity-{value} استفاده می‌کنیم.

✅ کلاس‌ها

• backdrop-opacity-0 → کاملاً شفاف (0%)

• backdrop-opacity-5 → 5% شفاف

• backdrop-opacity-10 → 10% شفاف

• backdrop-opacity-20 → 20% شفاف

• backdrop-opacity-25 → 25% شفاف

• backdrop-opacity-30 → 30% شفاف

• backdrop-opacity-40 → 40% شفاف

• backdrop-opacity-50 → 50% شفاف

• backdrop-opacity-60 → 60% شفاف

• backdrop-opacity-70 → 70% شفاف

• backdrop-opacity-75 → 75% شفاف

• backdrop-opacity-80 → 80% شفاف

• backdrop-opacity-90 → 90% شفاف

• backdrop-opacity-95 → 95% شفاف

• backdrop-opacity-100 → کاملاً مات (100%)

📌 می‌توان از responsive و hover هم استفاده کرد:

• hover:backdrop-opacity-50 → هنگام هاور شفافیت اعمال شود

✅ مثال

<div class="relative w-32 h-32 bg-blue-500 mb-2">
  <div class="absolute inset-0 bg-white backdrop-opacity-0 flex items-center justify-center">
    backdrop-opacity-0
  </div>
</div>

<div class="relative w-32 h-32 bg-green-500 mb-2">
  <div class="absolute inset-0 bg-white backdrop-opacity-50 flex items-center justify-center">
    backdrop-opacity-50
  </div>
</div>

<div class="relative w-32 h-32 bg-red-500 mb-2">
  <div class="absolute inset-0 bg-white backdrop-opacity-100 flex items-center justify-center">
    backdrop-opacity-100
  </div>
</div>

<div class="relative w-32 h-32 bg-yellow-500 mb-2">
  <div class="absolute inset-0 bg-white hover:backdrop-opacity-30 flex items-center justify-center">
    هاور backdrop-opacity-30
  </div>
</div>

📌 نکات مهم

• Backdrop Opacity روی پس‌زمینه عناصر زیرین اعمال می‌شود و نه خود عنصر.

• اغلب با background-color شفاف مثل bg-white/30 یا bg-black/20 ترکیب می‌شود.

• می‌توان با transition ترکیب کرد تا افکت نرم ایجاد شود:

  • transition duration-300 hover:backdrop-opacity-50