شبكة تعلم مع ناو

خطوة بخطوة نحو الهدف

تيليجرام

كيف أضيف طبقة داكنة فوق صورة أو قسم في CSS؟

سهلقراءة دقيقةآخر تحديث 1 أكتوبر 2026

CSS تطوير الويب

الإجابة

هذا الكود يضيف طبقة داكنة شفافة (Overlay) فوق القسم بالكامل:

div {
  position: relative;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

كيف يعمل؟

  • position: relative على الأب يجعل الطبقة تتموضع بالنسبة له.
  • ::before بموضع مطلق ويغطي العرض والارتفاع كاملين.
  • rgba(0, 0, 0, 0.5): أسود بشفافية 50%.

يُستخدم كثيرًا فوق صورة الخلفية، ليظهر النص الأبيض فوقها بوضوح.

ملاحظة: الكود الأصلي ينقصه content: ""، ومن دونها لا يظهر ::before أصلًا.

اختبر فهمك

ما الهدف من كود CSS التالي؟

div { position: relative }
div:before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

أسئلة أخرى في CSS