opacity

ویژگی opacity برای تنظیم شفافیت (transparency) یک عنصر استفاده میشه.

  • مقدارش بین 0 تا 1 هست.

  • 1 = کاملاً واضح (بدون شفافیت)

  • 0 = کاملاً شفاف (نامرئی)

  • اعداد بین این دو مقدار → نیمه شفاف

✅ سینتکس

selector { opacity: مقدار; }

📌 مثال‌ها

1️⃣ عنصر کاملاً واضح

img { opacity: 1; }

2️⃣ عنصر نیمه شفاف

img { opacity: 0.5; }

3️⃣ عنصر نامرئی

img { opacity: 0; }

⚠️ نکته مهم

وقتی روی یک عنصر opacity اعمال می‌کنی، همه محتوای داخل اون عنصر هم شفاف میشه.
مثال: اگر روی یک div با متن و عکس opacity: 0.5 بزنی → هم متن و هم عکس شفاف میشن.

✅ جایگزین (اگه فقط پس‌زمینه شفاف بشه)

اگه میخوای فقط پس‌زمینه شفاف بشه و متن یا محتوای داخل شفاف نشه، باید از رنگ با شفافیت (RGBA یا HSLA) استفاده کنی:

div { background-color: rgba(255, 0, 0, 0.5); /* قرمز نیمه‌شفاف */ }

📌 مثال ترکیبی

<div class="box">متن من</div>
.box { background: blue; color: white; padding: 20px; opacity: 0.6; }

🔹 کل div (هم متن و هم پس‌زمینه) شفاف میشه.