الفرق بين المراجعتين ل"CSS/background-color"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 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>.<syntaxhighlight lang="css"> | + | تضبط الخاصية <code>background-color</code> في CSS لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <code>[[CSS/color value|<color>]]</code>. |
| + | <syntaxhighlight lang="css"> | ||
/* كلمات محجوزة */ | /* كلمات محجوزة */ | ||
background-color: red; | 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"> | <div class="example-1"> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
مراجعة 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.