الدرس 25

الفرق بين Alpha و opacity في الشفافية

معنى المصطلحات

المعنى	Stand For	Name
درجة ظهور لون معين		Alpha
درجة ظهور العنصر كله بمحتواه		opacity

لو عاوز الخلفية تبقى شفافة شوية والنص يفضل واضح هتستخدم Alpha في لون الخلفية

أما opacity فبتأثر على العنصر كله خلينا نشوف الفرق بنفس اللون

عنصرين للمقارنة

<div class="alpha-box">
  <h2>Alpha Background</h2>
  <p>This Text Stays Fully Visible</p>
</div>
<div class="opacity-box">
  <h2>Element Opacity</h2>
  <p>This Text Fades With The Box</p>
</div>

.alpha-box {
  color: black;
  background-color: rgba(0, 0, 255, 0.5);
}

.opacity-box {
  color: black;
  background-color: rgb(0, 0, 255);
  opacity: 0.5;
}

في العنصر الأول الخلفية بس نصف شفافة والعنوان والفقرة واضحين بلونهم الأسود

في العنصر التاني الخلفية والعنوان والفقرة كلهم بيتعرضوا بدرجة ظهور 0.5 لأن opacity بتشتغل على العنصر بمحتواه

قيم opacity

القيمة 1 ظهور كامل
القيمة 0.5 نصف ظهور
القيمة 0 العنصر مش ظاهر لكنه لسه واخد مكانه في الصفحة

هل أقدر أرجع وضوح النص لوحده

لو حطيت opacity: 1 على الفقرة داخل العنصر التاني مش هتلغي تأثير الأب عليها لو المطلوب تخفيف الخلفية بس استخدم Alpha في لون الخلفية زي المثال الأول

Alpha مع Hex

ممكن تضيف خانتين في آخر كود Hex لتحديد Alpha القيمة 00 شفافة تماما والقيمة ff ظاهرة بالكامل

/* Fully Visible Blue */
background-color: #0000ffff;

/* Approximately Half Visible Blue */
background-color: #0000ff80;

/* Fully Transparent Blue */
background-color: #0000ff00;

ال 80 هنا قيمة Hex وبتدي ظهور قريب من النصف مش 80% لو عاوز 50% بالضبط تقدر تستخدم rgb(0 0 255 / 50%)

جرب بنفسك

غير القيم في العنصرين إلى 0.2 ثم 0.8 وقارن وضوح النص بعدها خلي opacity تساوي 0 ولاحظ إن مكان العنصر لسه موجود

آخر تعديل للدرس: 13/10/2026