الفرق بين المراجعتين لصفحة: «CSS/background-color»
< CSS
لا ملخص تعديل |
إضافة قسمين |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>background-color</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>background-color</code>}}</noinclude> | ||
تضبط الخاصية <code>background-color</code> في CSS لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <code>[[CSS/color value|<color>]]</code>. | تضبط الخاصية <code>background-color</code> في CSS لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <code>[[CSS/color value|<color>]]</code>. | ||
<syntaxhighlight lang="css"> | |||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | |||
|- | |||
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | |||
|<code>transparent</code> | |||
|- | |||
! scope="row" |تُطبَّق على | |||
|جميع العناصر. | |||
|- | |||
! scope="row" |قابلة للوراثة | |||
|لا | |||
|- | |||
!قابلة للتحريك | |||
|نعم | |||
|- | |||
! scope="row" |القيمة المحسوبة | |||
|القيمة المحسوبة للون. | |||
|}<syntaxhighlight lang="css"> | |||
/* كلمات محجوزة */ | /* كلمات محجوزة */ | ||
background-color: red; | background-color: red; | ||
| سطر 32: | سطر 50: | ||
background-color: unset; | background-color: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
هذا المثال فيه أربعة عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، وسنضبط لون الخلفية ولون النص فيها إلى قيم بصيغ مختلفة. شيفرة HTML: | هذا المثال فيه أربعة عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، وسنضبط لون الخلفية ولون النص فيها إلى قيم بصيغ مختلفة. شيفرة HTML: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <p class="example-1">موسوعة حسوب، مرجع المطورين العرب.</p> | ||
<p class="example-2">موسوعة حسوب، مرجع المطورين العرب.</p> | |||
</ | <p class="example-3">موسوعة حسوب، مرجع المطورين العرب.</p> | ||
<p class="example-4">موسوعة حسوب، مرجع المطورين العرب.</p> | |||
< | |||
</ | |||
< | |||
</ | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
p { | |||
padding: 10px; | padding: 10px; | ||
margin: 10px; | margin: 10px; | ||
| سطر 75: | سطر 65: | ||
.example-1 { | .example-1 { | ||
background-color: | background-color: gray; | ||
color: white; | color: white; | ||
} | } | ||
| سطر 85: | سطر 75: | ||
.example-3 { | .example-3 { | ||
background-color: hsla( | background-color: hsla(16, 83%, 47%, 0.7); | ||
color: hsla(250, 10%, 100%, 0.9); | color: hsla(250, 10%, 100%, 0.9); | ||
} | } | ||
.example-4 { | .example-4 { | ||
background-color: # | background-color: #205a23; | ||
color: #FFFFFF; | color: #FFFFFF; | ||
} | } | ||
| سطر 114: | سطر 104: | ||
تقبل الخاصية <code>background-color</code> قيمةً لونيةً <code>[[CSS/color value|<color>]]</code> واحدةً. | تقبل الخاصية <code>background-color</code> قيمةً لونيةً <code>[[CSS/color value|<color>]]</code> واحدةً. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value">[[CSS/color value|<color>]]</code> === | ||
هذه هي القيمة اللونية للخلفية، ويمكن أن تؤثر هذه القيمة على طريقة عرض العنصر حتى لو حُدِّت قيمة (أو قيم) للخاصية <code>[[CSS/background-image|background-image]]</code>. | هذه هي القيمة اللونية للخلفية، ويمكن أن تؤثر هذه القيمة على طريقة عرض العنصر حتى لو حُدِّت قيمة (أو قيم) للخاصية <code>[[CSS/background-image|background-image]]</code>. | ||
| سطر 124: | سطر 114: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==انظر أيضًا== | |||
*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>background</code> وهي: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-image|background-image]]</code>، و <code>[[CSS/background-origin|background-origin]]</code>، و <code>[[CSS/background-position|background-position]]</code>، و <code>[[CSS/background-repeat|background-repeat]]</code>، و <code>[[CSS/background-size|background-size]]</code>، و <code>[[CSS/background-attachment|background-attachment]]</code>. | |||
*صفحة الخاصية <code>[[CSS/color|color]]</code> لضبط لون العنصر. | |||
*القيم اللونية <code>[[CSS/color value|<color>]]</code>. | |||
*الهوامش <code>[[CSS/margin|margin]]</code> والحواشي <code>[[CSS/padding|padding]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#background-color CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#background-color CSS Backgrounds and Borders Module Level 3]. | ||
المراجعة الحالية بتاريخ 14:50، 17 مارس 2018
تضبط الخاصية 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.