الفرق بين المراجعتين لصفحة: «CSS/background»
لا ملخص تعديل |
إضافة قسمين |
||
(1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 2: | سطر 2: | ||
الخاصية <code>background</code> المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات. | الخاصية <code>background</code> المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات. | ||
يمكن استخدام الخاصية <code>background</code> لضبط قيم خاصية أو أكثر من الخاصيات الآتية: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-color|background-color]]</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>background</code> لضبط قيم خاصية أو أكثر من الخاصيات الآتية: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-color|background-color]]</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>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 48: | سطر 38: | ||
* <code>[[CSS/background-color|background-color]]</code>: القيمة اللونية المحسوبة. | * <code>[[CSS/background-color|background-color]]</code>: القيمة اللونية المحسوبة. | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* <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"); | |||
</syntaxhighlight>ستضبط الخاصية المختصرة <code>background</code> القيم المعطية لها وستعيد ضبط الخاصيات التي لم نُحدِّد لها قيمة إلى قيمتها الابتدائية. | |||
== أمثلة == | == أمثلة == | ||
سنستعرض في هذا القسم أمثلةً عن الخاصية <code>background</code> المختصرة، وما يكافئها من الخاصيات المفردة. | سنستعرض في هذا القسم أمثلةً عن الخاصية <code>background</code> المختصرة، وما يكافئها من الخاصيات المفردة. | ||
سطر 55: | سطر 57: | ||
background: red; | background: red; | ||
</syntaxhighlight>القاعدة السابقة تكافئ ما يلي من القواعد، لاحظ أنَّ جميع الخاصيات قد ضُبِطَت إلى قيمها الابتدائية ما عدا الخاصية <code>[[CSS/background-color|background-color]]</code>:<syntaxhighlight lang="css"> | </syntaxhighlight>القاعدة السابقة تكافئ ما يلي من القواعد، لاحظ أنَّ جميع الخاصيات قد ضُبِطَت إلى قيمها الابتدائية ما عدا الخاصية <code>[[CSS/background-color|background-color]]</code>:<syntaxhighlight lang="css"> | ||
background-color: red; | background-color: red; | ||
background-position: 0% 0%; | background-position: 0% 0%; | ||
background-size: auto; | background-size: auto; | ||
background-repeat: repeat; | background-repeat: repeat; | ||
background-clip: border-box; | background-clip: border-box; | ||
background-origin: padding-box; | background-origin: padding-box; | ||
background-attachment: scroll; | background-attachment: scroll; | ||
background-image: none; | background-image: none; | ||
</syntaxhighlight>أما هذه القاعدة، فهي تضبط صورة الخلفية (<code>[[CSS/background-clip|background-image]]</code>)، وتُحدِّد موضعها (<code>[[CSS/background-position|background-position]]</code>) ثم تضبط قياسها عبر تحديد قيمة الخاصية <code>[[CSS/background-size|background-size]]</code> بفصلها عن قيمة الخاصية <code>[[CSS/background-position|background-position]]</code> بخطٍ مائل <code>/</code>؛ لاحظ أنَّ تكرار صورة الخلفية (<code>[[CSS/background-repeat|background-repeat]]</code>) سيكون مضبوطًا عبر الكلمة المحجوزة <code>round</code>، وموضع الصورة (<code>[[CSS/background-attachment|background-attachment]]</code>) سيكون ثابتًا fixed، وستُضبَط قيمة الخاصيتين <code>[[CSS/background-origin|background-origin]]</code> و <code>[[CSS/background-clip|background-clip]]</code> معًا باستخدامنا للكلمة المحجوزة <code>border-box</code>:<syntaxhighlight lang="css"> | </syntaxhighlight>أما هذه القاعدة، فهي تضبط صورة الخلفية (<code>[[CSS/background-clip|background-image]]</code>)، وتُحدِّد موضعها (<code>[[CSS/background-position|background-position]]</code>) ثم تضبط قياسها عبر تحديد قيمة الخاصية <code>[[CSS/background-size|background-size]]</code> بفصلها عن قيمة الخاصية <code>[[CSS/background-position|background-position]]</code> بخطٍ مائل <code>/</code>؛ لاحظ أنَّ تكرار صورة الخلفية (<code>[[CSS/background-repeat|background-repeat]]</code>) سيكون مضبوطًا عبر الكلمة المحجوزة <code>round</code>، وموضع الصورة (<code>[[CSS/background-attachment|background-attachment]]</code>) سيكون ثابتًا fixed، وستُضبَط قيمة الخاصيتين <code>[[CSS/background-origin|background-origin]]</code> و <code>[[CSS/background-clip|background-clip]]</code> معًا باستخدامنا للكلمة المحجوزة <code>border-box</code>:<syntaxhighlight lang="css"> | ||
background: url(image.png) 40% / 10em gray round fixed border-box; | background: url(image.png) 40% / 10em gray round fixed border-box; | ||
</syntaxhighlight>القاعدة السابقة تكافئ ما يلي من القواعد:<syntaxhighlight lang="css"> | </syntaxhighlight>القاعدة السابقة تكافئ ما يلي من القواعد:<syntaxhighlight lang="css"> | ||
background-color: gray; | background-color: gray; | ||
background-position: 40% 50%; | background-position: 40% 50%; | ||
background-size: 10em; | background-size: 10em; | ||
background-repeat: round; | background-repeat: round; | ||
background-clip: border-box; | background-clip: border-box; | ||
background-origin: border-box; | background-origin: border-box; | ||
background-attachment: fixed; | background-attachment: fixed; | ||
background-image: url(image.png); | background-image: url(image.png); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 110: | سطر 112: | ||
تُحدِّد الخاصية <code>background</code> طبقةً أو أكثر من طبقات الخلفية، ويُفصَل بين الطبقات بفاصلة، وتكون بنية كل طبقة كما يلي: | تُحدِّد الخاصية <code>background</code> طبقةً أو أكثر من طبقات الخلفية، ويُفصَل بين الطبقات بفاصلة، وتكون بنية كل طبقة كما يلي: | ||
* قد تحتوي كل طبقة على مرة واحدة على الأكثر من القيم الآتية: | * قد تحتوي كل طبقة على مرة واحدة على الأكثر من القيم الآتية: | ||
** <code>[[# | ** <code>[[#<attachment>|<attachment>]]</code> | ||
** <code>[[# | ** <code>[[#<bg-image>|<bg-image>]]</code> | ||
** <code>[[# | ** <code>[[#<position>|<position>]]</code> | ||
** <code>[[# | ** <code>[[#<bg-size>|<bg-size>]]</code> | ||
** <code>[[# | ** <code>[[#<repeat-style>|<repeat-style>]]</code> | ||
* قد تكون قيمة <code>[[# | * قد تكون قيمة <code>[[#<bg-size>|<bg-size>]]</code> مذكورةً مباشرةً بعد قيمة <code>[[#<position>|<position>]]</code> ويفصل بينهما المحرف <code>/</code>، كما في <code>center/80%</code>. | ||
* يمكن تضمين القيمة <code>[[# | * يمكن تضمين القيمة <code>[[#<box>|<box>]]</code> صفر مرة أو مرة واحدة أو مرتين؛ وإذا وضعناها مرةً فستضبط قيمة الخاصيتين <code>[[CSS/background-origin|background-origin]]</code> و <code>[[CSS/background-clip|background-clip]]</code>، وإن وضعناها مرتين فأول مرة ستضبط قيمة الخاصية <code>[[CSS/background-origin|background-origin]]</code> والمرة الثانية ستضبط قيمة الخاصية <code>[[CSS/background-clip|background-clip]]</code>. | ||
* لا يمكن تضمين القيمة <code>[[# | * لا يمكن تضمين القيمة <code>[[#<background-color>|<background-color>]]</code> إلا في آخر طبقة. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><attachment></code> === | ||
راجع صفحة الخاصية <code>[[CSS/background-attachment|background-attachment]]</code>. | راجع صفحة الخاصية <code>[[CSS/background-attachment|background-attachment]]</code>. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><box></code> === | ||
راجع صفحة الخاصية <code>[[CSS/background-clip|background-clip]]</code> والخاصية <code>[[CSS/background-origin|background-origin]]</code>. | راجع صفحة الخاصية <code>[[CSS/background-clip|background-clip]]</code> والخاصية <code>[[CSS/background-origin|background-origin]]</code>. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><background-color></code> === | ||
راجع صفحة الخاصية <code>[[CSS/background-color|background-color]]</code>. | راجع صفحة الخاصية <code>[[CSS/background-color|background-color]]</code>. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><bg-image></code> === | ||
راجع صفحة الخاصية <code>[[CSS/background-image|background-image]]</code>. | راجع صفحة الخاصية <code>[[CSS/background-image|background-image]]</code>. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><position></code> === | ||
راجع صفحة الخاصية <code>[[CSS/background-position|background-position]]</code>. | راجع صفحة الخاصية <code>[[CSS/background-position|background-position]]</code>. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><repeat-style></code> === | ||
راجع صفحة الخاصية <code>[[CSS/background-repeat|background-repeat]]</code>. | راجع صفحة الخاصية <code>[[CSS/background-repeat|background-repeat]]</code>. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><bg-size></code> === | ||
راجع صفحة الخاصية <code>[[CSS/background-size|background-size]]</code>. | راجع صفحة الخاصية <code>[[CSS/background-size|background-size]]</code>. | ||
سطر 147: | سطر 149: | ||
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'> | <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>background</code> وهي: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-color|background-color]]</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> لضبط لون العنصر. | |||
* التدرجات اللونية [[CSS/gradient|<gradient>]]. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
سطر 152: | سطر 159: | ||
* مواصفة [http://www.w3.org/TR/CSS2/colors.html#propdef-background CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/colors.html#propdef-background CSS Level 2 (Revision 1)]. | ||
* مواصفة [http://www.w3.org/TR/CSS1/#background CSS Level 1]. | * مواصفة [http://www.w3.org/TR/CSS1/#background CSS Level 1]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Background]] | [[تصنيف:CSS Background|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 09:02، 7 مارس 2018
الخاصية 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'>
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
background
وهي:background-clip
، وbackground-color
، وbackground-image
، وbackground-origin
، وbackground-position
، وbackground-repeat
، وbackground-size
، وbackground-attachment
. - صفحة الخاصية
color
لضبط لون العنصر. - التدرجات اللونية <gradient>.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة القدرة على تضمين عدِّة خلفيات، وأضافت الخاصيات
background-size
وbackground-origin
وbackground-clip
الجديدة. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.