الخاصية background

من موسوعة حسوب
< CSS

الخاصية 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 طبقةً أو أكثر من طبقات الخلفية، ويُفصَل بين الطبقات بفاصلة، وتكون بنية كل طبقة كما يلي:

<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'>

انظر أيضًا

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/background&oldid=2937»