خاصية لون الخلفية
آخر تحديث: 2026-09-13
background-color خاصية لون الخلفية
تحدد الخاصية background-color لون خلفية العنصر، وهي إحدى أهم الخصائص الأساسية في تصميم الصفحات. تقبل كل قيمة لون في CSS، وتعطي الكلمة المفتاحية transparent خلفية شفافة. الخاصية غير موروثة، وخلفية كل عنصر شفافة افتراضياً.
| الفئة | |
|---|---|
| القيمة الأولية | transparent |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | color |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
background-color: <color> | transparent;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<color> | النوع | قيمة لون الخلفية |
transparent | كلمة مفتاحية | خلفية شفافة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لا تمتد خلفية العنصر إلى منطقة الهامش؛ تُطلى منطقة المحتوى والحشوة فقط.
مهم： تأكد دائماً من أن التباين بين لون الخلفية ولون النص يلبي معايير إمكانية القراءة في WCAG.
❓ الأسئلة الشائعة
Qكيف أجعل الخلفية شفافة تماماً؟
Aعيّن background-color: transparent; لكشف العناصر السفلية أو اللون الأساسي للصفحة. تؤثر الشفافية في الخلفية فقط — ولا يتأثر محتوى العنصر نفسه (النص والعناصر الفرعية). لجعل العنصر بأكمله، بما في ذلك محتواه، يختفي، استخدم opacity: 0 أو visibility: hidden بدلاً من ذلك.
Qهل تُورَّث background-color؟
Aلا. قيمتها الافتراضية هي transparent، ويحسبها كل عنصر بشكل مستقل دون أن يرثها من الأصل. لكن عندما يكون خلفية العنصر الفرعي شفافة، يظهر خلفية الأصل أو body مرئياً من خلفها — وهذا أيضاً سبب أن تعيين خلفية على body يبدو أنه يغطي الصفحة بأكملها.
Qكيف أجعل الخلفية شبه شفافة دون التأثير على النص؟
Aاستخدم لوناً بقناة ألفا، مثل background-color: rgba(0, 0, 0, 0.5); أو hsla(210, 50%, 50%, 0.5)، أو قيمة ست عشرية من 8 أرقام مثل #00000080. يصبح الخلفية وحدها شبه شفافة بينما يبقى النص واضحاً. تجنّب opacity، لأنه يجعل النص والعناصر الفرعية شفافة أيضاً.
Qهل يمكنني إنشاء تدرّج لوني بـ background-color؟
Aلا. تدعم background-color الألوان الصلبة فقط؛ التدرّجات تنتمي إلى عائلة background-image وتحتاج إلى دوال مثل background-image: linear-gradient(to right, #ff7e5f, #feb47b);. ومع ذلك، يُستخدم background-color غالباً كطبقة أساسية تحت التدرّج، موفراً لوناً احتياطياً أثناء تحميل صورة التدرّج.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
