ویژگی 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 (هم متن و هم پس‌زمینه) شفاف میشه.