CSS Opacity شفافية العناصر

CSS - شفافية الصور (Image Transparency)

🔸 في CSS، يمكننا استخدام الخاصية opacity للتحكم في شفافية الصورة أو أي عنصر آخر. القيم تتراوح بين 0 (شفاف تمامًا) و 1 (غير شفاف).

<img src="image.jpg" style="opacity: 0.5;">

📌 الصورة ستظهر بنسبة 50٪ شفافية.

عند تطبيق opacity على عنصر، فإن جميع محتوياته (نصوص، صور داخلية) تتأثر أيضًا وتصبح شفافة.

في هذه الحالة لا نستخدم opacity، بل نستخدم rgba() لتحديد لون الخلفية مع مستوى الشفافية.


.transparent-box {
  background-color: rgba(0, 0, 0, 0.3); /* أسود شفاف */
  color: white;
  padding: 20px;
}


<div class="transparent-box">
  هذا نص فوق خلفية شفافة.
</div>