الخاصية background-color

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

تضبط الخاصية 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>;

انظر أيضًا

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