الخاصية background-color

تضبط الخاصية background-color في CSS لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <color>.

بطاقة الخاصية

القيمة الابتدائية	transparent
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	القيمة المحسوبة للون.

/* كلمات محجوزة */
background-color: red;

/* قيمة ست عشرية */
background-color: #bbff00;

/* قيم ست عشرية مع شفافية */
background-color: #11ffee00;
background-color: #11ffeeff;

/* استخدام دالة */
background-color: rgb(255, 255, 128);

/* استخدام دالة تدعم الشفافية */
background-color: rgba(117, 190, 218, 0.0);
background-color: rgba(117, 190, 218, 0.5);
background-color: rgba(117, 190, 218, 1.0); 
​​​​​​​
/* hsla() */
background-color: hsla(50, 33%, 25%, 0.75);

/* كلمات محجوزة لها معنى خاص */
background-color: currentcolor;
background-color: transparent;

/* القيم العامة */
background-color: inherit;
background-color: initial;
background-color: unset;

أمثلة

هذا المثال فيه أربعة عناصر <div>، وسنضبط لون الخلفية ولون النص فيها إلى قيم بصيغ مختلفة. شيفرة HTML:

<p class="example-1">موسوعة حسوب، مرجع المطورين العرب.</p>
<p class="example-2">موسوعة حسوب، مرجع المطورين العرب.</p>
<p class="example-3">موسوعة حسوب، مرجع المطورين العرب.</p>
<p class="example-4">موسوعة حسوب، مرجع المطورين العرب.</p>

شيفرة CSS:

p {
  padding: 10px;
  margin: 10px;
}

.example-1 {
  background-color: gray;
  color: white;
}

.example-2 {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.example-3 {
  background-color: hsla(16, 83%, 47%, 0.7);
  color: hsla(250, 10%, 100%, 0.9);
}
    
.example-4 {
  background-color: #205a23;
  color: #FFFFFF;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	3.5	1.0

البنية العامة

تقبل الخاصية background-color قيمةً لونيةً <color> واحدةً.

<color>

هذه هي القيمة اللونية للخلفية، ويمكن أن تؤثر هذه القيمة على طريقة عرض العنصر حتى لو حُدِّت قيمة (أو قيم) للخاصية background-image.

فلو ضبطنا صورةً للخلفية لكن هذه الصورة لم تكن صالحةً، فستعرَض هذه القيمة اللونية بدلًا منها. ويمكن في حال ضبطنا صورة للخلفية وكان في هذه الصورة منطقة شفافة فستظهر القيمة اللونية التي حددناها في هذه الخاصية حينئذٍ.

البنية الرسمية

background-color: <color>;

انظر أيضًا

• صفحة الخاصيات التي تضبطها الخاصية المختصرة background وهي: background-clip، و background-image، و background-origin، و background-position، و background-repeat، و background-size، و background-attachment.
• صفحة الخاصية color لضبط لون العنصر.
• القيم اللونية <color>.
• الهوامش margin والحواشي padding.

مصادر ومواصفات

• مواصفة CSS Backgrounds and Borders Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.