الخاصية background
الخاصية background المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات.
يمكن استخدام الخاصية background لضبط قيم خاصية أو أكثر من الخاصيات الآتية: background-clip، و background-color، و background-image، و background-origin، و background-position، و background-repeat، و background-size، و background-attachment.
/* <background-color> */
background: green;
/* <bg-image> <repeat-style> */
background: url("image.png") repeat-y;
/* <box> <background-color> */
background: border-box red;
/* صورة واحدة تم توسطيها وتغيير أبعادها */
background: no-repeat center/80% url("image.png");
ستضبط الخاصية المختصرة background القيم المعطية لها وستعيد ضبط الخاصيات التي لم نُحدِّد لها قيمة إلى قيمتها الابتدائية.
| القيمة الابتدائية | ستُضبَط قيم الخاصيات غير المختصرة إلى قيمها الابتدائية:
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للحركة | نعم |
| القيمة المحسوبة | كل قيمة من قيم الخاصيات المختصرة:
|
أمثلة
سنستعرض في هذا القسم أمثلةً عن الخاصية background المختصرة، وما يكافئها من الخاصيات المفردة.
هذه القاعدة ستجعل لون الخلفية أحمر:
background: red;
القاعدة السابقة تكافئ ما يلي من القواعد، لاحظ أنَّ جميع الخاصيات قد ضُبِطَت إلى قيمها الابتدائية ما عدا الخاصية background-color:
background-color: red;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: none;
أما هذه القاعدة، فهي تضبط صورة الخلفية (background-image)، وتُحدِّد موضعها (background-position) ثم تضبط قياسها عبر تحديد قيمة الخاصية background-size بفصلها عن قيمة الخاصية background-position بخطٍ مائل /؛ لاحظ أنَّ تكرار صورة الخلفية (background-repeat) سيكون مضبوطًا عبر الكلمة المحجوزة round، وموضع الصورة (background-attachment) سيكون ثابتًا fixed، وستُضبَط قيمة الخاصيتين background-origin و background-clip معًا باستخدامنا للكلمة المحجوزة border-box:
background: url(image.png) 40% / 10em gray round fixed border-box;
القاعدة السابقة تكافئ ما يلي من القواعد:
background-color: gray;
background-position: 40% 50%;
background-size: 10em;
background-repeat: round;
background-clip: border-box;
background-origin: border-box;
background-attachment: fixed;
background-image: url(image.png);
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الرئيسي | 1.0 | 1.0 | 4 | 3.5 | 1.0 |
| صور SVG كخلفية | 31.0 | 9.0 | 9.0 | 21.0 | 5.1 |
| قيم الخاصيات background-size و background-origin و background-clip | 21.0 | 22.0 | 9.0 | 21.0 | 5.1 |
البنية العامة
تُحدِّد الخاصية background طبقةً أو أكثر من طبقات الخلفية، ويُفصَل بين الطبقات بفاصلة، وتكون بنية كل طبقة كما يلي:
- قد تحتوي كل طبقة على مرة واحدة على الأكثر من القيم الآتية:
- قد تكون قيمة
<bg-size>مذكورةً مباشرةً بعد قيمة<position>ويفصل بينهما المحرف/، كما فيcenter/80%. - يمكن تضمين القيمة
<box>صفر مرة أو مرة واحدة أو مرتين؛ وإذا وضعناها مرةً فستضبط قيمة الخاصيتينbackground-originوbackground-clip، وإن وضعناها مرتين فأول مرة ستضبط قيمة الخاصيةbackground-originوالمرة الثانية ستضبط قيمة الخاصيةbackground-clip. - لا يمكن تضمين القيمة
<background-color>إلا في آخر طبقة.
القيمة<attachment>
راجع صفحة الخاصية background-attachment.
القيمة<box>
راجع صفحة الخاصية background-clip والخاصية background-origin.
القيمة<background-color>
راجع صفحة الخاصية background-color.
القيمة<bg-image>
راجع صفحة الخاصية background-image.
القيمة<position>
راجع صفحة الخاصية background-position.
القيمة<repeat-style>
راجع صفحة الخاصية background-repeat.
القيمة<bg-size>
راجع صفحة الخاصية background-size.
البنية الرسمية
background : [ <bg-layer> , ]* <final-bg-layer>;
حيث:
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة القدرة على تضمين عدِّة خلفيات، وأضافت الخاصيات
background-sizeوbackground-originوbackground-clipالجديدة. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.