الفرق بين المراجعتين لصفحة: «CSS/background-image»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>background-image</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>background-image</code>}}</noinclude> | ||
الخاصية <code>background-image</code> في CSS تضبط صورةً أو أكثر على أنها خلفية للعنصر. | الخاصية <code>background-image</code> في CSS تضبط صورةً أو أكثر على أنها خلفية للعنصر. | ||
ستُطبَّق صور الخلفية فوق بعضها بعضًا، وترسم أوّل طبقة مُحدَّدة وكأنها أقرب طبقة إلى المستخدم. | |||
سيُرسَم إطار العنصر <code>[[CSS/border|border]]</code> فوق صور الخلفية، وسيوضع اللون المُحدَّد في الخاصية <code>[[CSS/background-color|background-color]]</code> تحتها. تُحدَّد العلاقة بين الصور المعروضة وصندوق العنصر وإطاره باستخدام الخاصيتين <code>[[CSS/background-clip|background-clip]]</code> و <code>[[CSS/background-origin|background-origin]]</code> في CSS. | سيُرسَم إطار العنصر <code>[[CSS/border|border]]</code> فوق صور الخلفية، وسيوضع اللون المُحدَّد في الخاصية <code>[[CSS/background-color|background-color]]</code> تحتها. تُحدَّد العلاقة بين الصور المعروضة وصندوق العنصر وإطاره باستخدام الخاصيتين <code>[[CSS/background-clip|background-clip]]</code> و <code>[[CSS/background-origin|background-origin]]</code> في CSS. | ||
| سطر 22: | سطر 9: | ||
ملاحظة: حتى لو لم تكن هنالك شفافية في الصور المستخدمة، ولن يُعرَض لون الخلفية عادةً، لكن من المستحسن أن يُحدِّد مطورو الويب لون الخلفية باستخدام الخاصية <code>[[CSS/background-color|background-color]]</code>، فلو لم يتمكن المتصفح من تحميل الصورة (مثلًا) فسيستخدم لون الخلفية بديلًا عن الصورة. | ملاحظة: حتى لو لم تكن هنالك شفافية في الصور المستخدمة، ولن يُعرَض لون الخلفية عادةً، لكن من المستحسن أن يُحدِّد مطورو الويب لون الخلفية باستخدام الخاصية <code>[[CSS/background-color|background-color]]</code>، فلو لم يتمكن المتصفح من تحميل الصورة (مثلًا) فسيستخدم لون الخلفية بديلًا عن الصورة. | ||
{{Course|course=frontend}} | |||
__TOC__ | |||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 38: | سطر 28: | ||
! scope="row" |القيمة المحسوبة | ! scope="row" |القيمة المحسوبة | ||
|كما حُدِّدَت، لكن مع جعل قيمة رابط <code>[[CSS/url|url]]</code> مطلقةً. | |كما حُدِّدَت، لكن مع جعل قيمة رابط <code>[[CSS/url|url]]</code> مطلقةً. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* قيمة واحدة */ | |||
background-image: url('bg-image.png'); | |||
/* عدِّة قيم */ | |||
background-image: url('bg-image-1.png'), url('bg-image-2.png'); | |||
/* كلمة محجوزة */ | |||
background-image: none; | |||
/* قيم عامة */ | |||
background-image: inherit; | |||
background-image: initial; | |||
background-image: unset; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
=== خلفية لكامل الصفحة === | |||
مثالٌ بسيط عن ضبط صورة خلفية للعنصر <code>[[HTML/body|<body>]]</code> مع تحديد لون لها في حال لم يتمكن المتصفح من عرضها لسببٍ من الأسباب:<syntaxhighlight lang="css"> | مثالٌ بسيط عن ضبط صورة خلفية للعنصر <code>[[HTML/body|<body>]]</code> مع تحديد لون لها في حال لم يتمكن المتصفح من عرضها لسببٍ من الأسباب:<syntaxhighlight lang="css"> | ||
body { | body { | ||
| سطر 46: | سطر 52: | ||
background-color: #cccccc; | background-color: #cccccc; | ||
} | } | ||
</syntaxhighlight>مثال عن استخدام تدرج لوني صورةً للخلفية، ويكون التدرج اللوني خطيًّا من اللون الذهبي (<code>gold</code>) إلى اللون الأخضر المصفر (<code>greenyellow</code>). شيفرة HTML:<syntaxhighlight lang="html"> | </syntaxhighlight> | ||
< | |||
=== استخدام تدرج لوني كخلفية === | |||
</ | مثال عن استخدام تدرج لوني صورةً للخلفية، ويكون التدرج اللوني خطيًّا من اللون الذهبي (<code>gold</code>) إلى اللون الأخضر المصفر (<code>greenyellow</code>). شيفرة [[HTML]]:<syntaxhighlight lang="html"> | ||
<p class="gradient-bg"> | |||
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين. | |||
</p> | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
.gradient-bg { | .gradient-bg { | ||
background-image: linear-gradient( | background-image: linear-gradient(#205a23, #28832c); | ||
color: white; | |||
} | } | ||
</syntaxhighlight>شيفرة CSS حددنا فيها أكثر من صورة خلفية للعنصر نفسه:<syntaxhighlight lang="css"> | </syntaxhighlight> | ||
=== استخدام أكثر من صورة كخلفية === | |||
شيفرة CSS حددنا فيها أكثر من صورة خلفية للعنصر نفسه:<syntaxhighlight lang="css"> | |||
background-image: url(image-1.png), url(image-2.png); | background-image: url(image-1.png), url(image-2.png); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 84: | سطر 97: | ||
== البنية العامة == | == البنية العامة == | ||
يمكن تحديد كل خلفية إما عبر الكلمة المحجوزة <code>none</code> أو عبر نوع البيانات <code>[[CSS/image|<image>]]</code>. | يمكن تحديد كل خلفية إما عبر الكلمة المحجوزة <code>none</code> أو عبر نوع البيانات <code>[[CSS/image|<image>]]</code>. | ||
=== | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value">[[CSS/image|<image>]]</code> === | ||
تُشير القيمة <code>[[CSS/image|<image>]]</code> إلى الصورة التي ستُعرَض، ويمكن تحديد أكثر من صورة بفصلها بفاصلة <code>,</code>. | تُشير القيمة <code>[[CSS/image|<image>]]</code> إلى الصورة التي ستُعرَض، ويمكن تحديد أكثر من صورة بفصلها بفاصلة <code>,</code>. | ||
| سطر 94: | سطر 107: | ||
<bg-image> = none | <image> | <bg-image> = none | <image> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==انظر أيضًا== | |||
*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>background</code> وهي: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-color|background-color]]</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>]]. | |||
*صفحة العنصر <code>[[HTML/img|<img>]]</code> الذي يستخدم لإضافة الصور. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#background-image CSS Backgrounds and Borders Module Level 3]، أضافت هذه المواصفة القدرة على تحديد أكثر من قيمة <code>[[CSS/image|<image>]]</code> لهذه الخاصية. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#background-image CSS Backgrounds and Borders Module Level 3]، أضافت هذه المواصفة القدرة على تحديد أكثر من قيمة <code>[[CSS/image|<image>]]</code> لهذه الخاصية. | ||
المراجعة الحالية بتاريخ 11:14، 7 أكتوبر 2022
الخاصية background-image في CSS تضبط صورةً أو أكثر على أنها خلفية للعنصر.
ستُطبَّق صور الخلفية فوق بعضها بعضًا، وترسم أوّل طبقة مُحدَّدة وكأنها أقرب طبقة إلى المستخدم.
سيُرسَم إطار العنصر border فوق صور الخلفية، وسيوضع اللون المُحدَّد في الخاصية background-color تحتها. تُحدَّد العلاقة بين الصور المعروضة وصندوق العنصر وإطاره باستخدام الخاصيتين background-clip و background-origin في CSS.
إذا لم يمكن ممكنًا عرض الصورة المُحدَّد (على سبيل المثال: لم يتمكن المتصفح من تحميل الصورة من رابط URI الخاص بها)، فسيفترض المتصفح أنَّ القيمة هي none.
ملاحظة: حتى لو لم تكن هنالك شفافية في الصور المستخدمة، ولن يُعرَض لون الخلفية عادةً، لكن من المستحسن أن يُحدِّد مطورو الويب لون الخلفية باستخدام الخاصية background-color، فلو لم يتمكن المتصفح من تحميل الصورة (مثلًا) فسيستخدم لون الخلفية بديلًا عن الصورة.
دورة تطوير واجهات المستخدم
- 72 ساعة فيديو تدريبية
- من الصفر دون الحاجة لخبرة مسبقة
- شهادة معتمدة من أكاديمية حسوب
- متابعة أثناء الدورة من فريق مختص
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت، لكن مع جعل قيمة رابط url مطلقةً.
|
/* قيمة واحدة */
background-image: url('bg-image.png');
/* عدِّة قيم */
background-image: url('bg-image-1.png'), url('bg-image-2.png');
/* كلمة محجوزة */
background-image: none;
/* قيم عامة */
background-image: inherit;
background-image: initial;
background-image: unset;
أمثلة
خلفية لكامل الصفحة
مثالٌ بسيط عن ضبط صورة خلفية للعنصر <body> مع تحديد لون لها في حال لم يتمكن المتصفح من عرضها لسببٍ من الأسباب:
body {
background-image: url("bg-image.png");
background-color: #cccccc;
}
استخدام تدرج لوني كخلفية
مثال عن استخدام تدرج لوني صورةً للخلفية، ويكون التدرج اللوني خطيًّا من اللون الذهبي (gold) إلى اللون الأخضر المصفر (greenyellow). شيفرة HTML:
<p class="gradient-bg">
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
شيفرة CSS:
.gradient-bg {
background-image: linear-gradient(#205a23, #28832c);
color: white;
}
استخدام أكثر من صورة كخلفية
شيفرة CSS حددنا فيها أكثر من صورة خلفية للعنصر نفسه:
background-image: url(image-1.png), url(image-2.png);
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4.0 | 3.5 | 1.0 |
| صور SVG | 8.0 | 4.0 | 9.0 | 9.5 | 5.0 |
البنية العامة
يمكن تحديد كل خلفية إما عبر الكلمة المحجوزة none أو عبر نوع البيانات <image>.
<image>
تُشير القيمة <image> إلى الصورة التي ستُعرَض، ويمكن تحديد أكثر من صورة بفصلها بفاصلة ,.
البنية الرسمية
background-image: <bg-image>#;
حيث:
<bg-image> = none | <image>
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
backgroundوهي:background-clip، وbackground-color، وbackground-origin، وbackground-position، وbackground-repeat، وbackground-size، وbackground-attachment. - صفحة الخاصية
colorلضبط لون العنصر. - التدرجات اللونية <gradient>.
- صفحة العنصر
<img>الذي يستخدم لإضافة الصور.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة القدرة على تحديد أكثر من قيمة
<image>لهذه الخاصية. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.