background-color

خاصية لون الخلفية background-color

خاصية background-color تلوّن خلفية العنصر — وبالشفافية الجزئية تصنع «صبغات» العلامة الأنيقة فوق أي سطح.

أبسط خصائص الخلفية وأساس نظام الأسطح surfaces في أي واجهة: خلفية صفحة، أسطح بطاقات أفتح/أغمق درجة، وتظليلات هفر. الحيلة العصرية: لون العلامة بشفافية منخفضة — rgb(124 92 255 / 0.1) يعطي «همسة» بنفسجية تتناغم مع أي خلفية تحتها (وصفة شارات هذا الموقع كلها).

ولا تنس التباين مع لون النص فوقها: العلاقة محسوبة بمعيار 4.5:1 لا بالذوق.

الصياغة

.card { background-color: #f6f4fb; }
.chip { background-color: rgb(124 92 255 / 0.12); }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .s { padding: 10px 14px; border-radius: 10px; margin-bottom: 6px; }
</style>
<div class="s" style="background-color:#ede9fe">سطح فاتح مصبوغ</div>
<div class="s" style="background-color:rgb(124 92 255 / 0.15); color:#5b21b6">صبغة شفافة فوق الصفحة — chip العلامة</div>
<div class="s" style="background-color:#17151d; color:white">سطح داكن معاكس</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
hex / rgb / oklch	كل صيغ الألوان — والشفافية بصيغة السلاش الحديثة
transparent	بلا خلفية — القيمة الافتراضية الفعلية
currentColor	خلفية بلون النص — أنماط عكسية ذكية

💡 نصائح عملية

ابنِ سلم أسطح بمتغيرات: --background و--surface و--surface-2 — عمق فوري منظم
صبغة علامة 8-15% شفافية = شارات وأزرار ثانوية متناغمة مع الثيمين

⚠️ أخطاء شائعة

نص رمادي على خلفية ملونة بلا فحص تباين
خلفيات صارخة كاملة التشبع لمساحات كبيرة — إجهاد بصري

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs