📌 این ویژگی مشخص می‌کنه که چطور رنگ پس‌زمینه‌ها و تصاویر پس‌زمینه با هم ترکیب شوند.
در Tailwind از کلاس‌های bg-blend-{mode} استفاده می‌کنیم.

✅ کلاس‌ها

• bg-blend-normal → ترکیب عادی (default)

• bg-blend-multiply → رنگ‌ها ضرب می‌شوند (تیره‌تر می‌شود)

• bg-blend-screen → رنگ‌ها روشن‌تر می‌شوند

• bg-blend-overlay → ترکیبی از multiply و screen

• bg-blend-darken → تیره‌تر شدن رنگ

• bg-blend-lighten → روشن‌تر شدن رنگ

• bg-blend-color-dodge → افزایش روشنایی رنگ‌ها

• bg-blend-color-burn → افزایش تیرگی رنگ‌ها

• bg-blend-hard-light → روشنایی و تیرگی ترکیبی

• bg-blend-soft-light → روشنایی و تیرگی ملایم

• bg-blend-difference → تفاوت رنگ‌ها

• bg-blend-exclusion → حذف رنگ‌ها

• bg-blend-hue → حفظ Hue رنگ

• bg-blend-saturation → حفظ Saturation رنگ

• bg-blend-color → حفظ Hue و Saturation

• bg-blend-luminosity → حفظ Brightness

✅ مثال

<div class="w-32 h-32 bg-red-500 bg-blend-multiply mb-2" style="background-image: url('https://via.placeholder.com/150');">
  multiply
</div>

<div class="w-32 h-32 bg-green-500 bg-blend-screen mb-2" style="background-image: url('https://via.placeholder.com/150');">
  screen
</div>

<div class="w-32 h-32 bg-blue-500 bg-blend-overlay mb-2" style="background-image: url('https://via.placeholder.com/150');">
  overlay
</div>

📌 نکات مهم

• Background Blend Mode فقط روی background-color و background-image اعمال می‌شود.

• می‌توان با responsive و hover ترکیب کرد:

  • hover:bg-blend-multiply → هنگام هاور حالت multiply فعال شود