الفرق بين المراجعتين لصفحة: «CSS/background-color»

مراجعة 14:41، 17 مارس 2018

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

/* كلمات محجوزة */
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;

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

أمثلة

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

<div class="example-1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="example-2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="example-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="example-4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

شيفرة CSS:

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

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

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

.example-3 {
  background-color: hsla(150, 30%, 50%, 0.7);
  color: hsla(250, 10%, 100%, 0.9);
}
    
.example-4 {
  background-color: #777799;
  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>;

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>background-color</code>}}</noinclude>
-تضبط الخاصية <code>background-color</code> في CSS لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <code>[[CSS/color value|<color>]]</code>.<syntaxhighlight lang="css">
+تضبط الخاصية <code>background-color</code> في CSS لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <code>[[CSS/color value|<color>]]</code>.
+<syntaxhighlight lang="css">
 /* كلمات محجوزة */
 background-color: red;
@@ سطر 50: / سطر 51: @@
 == أمثلة ==
-هذا المثال فيه أربعة عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، وسنضبط لون الخلفية ولون النص فيها إلى قيم بصيغ مختلفة. شيفرة HTML:<syntaxhighlight lang="html">
+هذا المثال فيه أربعة عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، وسنضبط لون الخلفية ولون النص فيها إلى قيم بصيغ مختلفة. شيفرة HTML:
+<syntaxhighlight lang="html">
 <div class="example-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.