الفرق بين المراجعتين ل"CSS/background-repeat"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>background-repeat</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>background-repeat</code>}}</noinclude> | ||
| − | الخاصية <code>background-position</code> في CSS تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا. | + | الخاصية <code>background-position</code> في CSS تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | / | + | افتراضيًا، ستُقصّ الصورة إلى أبعاد العنصر، لكن يمكن أن تغيير أبعادها لتتسع داخله (باستخدام القيمة <code>round</code>) أو توزيعها بانتظام بين أطراف العنصر (باستخدام القيمة <code>space</code>). |
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 36: | سطر 21: | ||
! scope="row" |القيمة المحسوبة | ! scope="row" |القيمة المحسوبة | ||
|قائمة فيها أكثر من عنصر، وكل عنصر يتألف من كلمتين محجوزتين، وكل كلمة محجوزة تمثِّل طريقة التكرار في ذاك الاتجاه. | |قائمة فيها أكثر من عنصر، وكل عنصر يتألف من كلمتين محجوزتين، وكل كلمة محجوزة تمثِّل طريقة التكرار في ذاك الاتجاه. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* تحديد قيمة واحدة */ | ||
| + | background-repeat: repeat-x; | ||
| + | background-repeat: repeat-y; | ||
| + | background-repeat: repeat; | ||
| + | background-repeat: space; | ||
| + | background-repeat: round; | ||
| + | background-repeat: no-repeat; | ||
| + | |||
| + | /* horizontal | vertical */ | ||
| + | background-repeat: repeat space; | ||
| + | background-repeat: repeat repeat; | ||
| + | background-repeat: round space; | ||
| + | background-repeat: no-repeat round; | ||
| + | /* القيم العامة */ | ||
| + | background-repeat: inherit; | ||
| + | background-repeat: initial; | ||
| + | background-repeat: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
القاعدة الآتية ستؤدي إلى تكرار صورة الخلفية (المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>) على المحور الأفقي (x) فقط: <syntaxhighlight lang="css"> | القاعدة الآتية ستؤدي إلى تكرار صورة الخلفية (المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>) على المحور الأفقي (x) فقط: <syntaxhighlight lang="css"> | ||
| سطر 44: | سطر 47: | ||
background-repeat: repeat-y; | background-repeat: repeat-y; | ||
</syntaxhighlight>وهذه القاعدة ستؤدي إلى عدم تكرار صورة الخلفية الخلفية <code>[[CSS/background-image|background-image]]</code>، أي أنها ستعرَض مرةً واحدةً فقط: <syntaxhighlight lang="css"> | </syntaxhighlight>وهذه القاعدة ستؤدي إلى عدم تكرار صورة الخلفية الخلفية <code>[[CSS/background-image|background-image]]</code>، أي أنها ستعرَض مرةً واحدةً فقط: <syntaxhighlight lang="css"> | ||
| − | background-repeat: repeat | + | background-repeat: no-repeat; |
</syntaxhighlight>المُحدِّد الآتي سيضبط صورة خلفية على العنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وسيوسِّطها (باستخدام الخاصية <code>[[CSS/background-position|background-position]]</code>) وسيكرِّرها على المحور الرأسي (y) فقط: <syntaxhighlight lang="css"> | </syntaxhighlight>المُحدِّد الآتي سيضبط صورة خلفية على العنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وسيوسِّطها (باستخدام الخاصية <code>[[CSS/background-position|background-position]]</code>) وسيكرِّرها على المحور الرأسي (y) فقط: <syntaxhighlight lang="css"> | ||
p { | p { | ||
| سطر 95: | سطر 98: | ||
== البنية العامة == | == البنية العامة == | ||
| − | === | + | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><repeat-style></code> === |
إذا استخدمنا قيمةً واحدةً فسنكون قد استعملنا صيغةً مختصرةً بدلًا من تحديد قيمتين: | إذا استخدمنا قيمةً واحدةً فسنكون قد استعملنا صيغةً مختصرةً بدلًا من تحديد قيمتين: | ||
* القيمة <code>repeat-x</code> تكافئ <code>repeat no-repeat</code> | * القيمة <code>repeat-x</code> تكافئ <code>repeat no-repeat</code> | ||
| سطر 129: | سطر 132: | ||
</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-size|background-size]]</code>، و <code>[[CSS/background-attachment|background-attachment]]</code>. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-repeat CSS Backgrounds and Borders Module Level 3]، أضافت هذه المواصفة دعمًا لتعدد الخلفيات، ولإعطاء قيمتين للتكرار (واحدة على كل محور)، وأضافت الكلمتين المحجوزتين <code>space</code> و <code>round</code>. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-repeat CSS Backgrounds and Borders Module Level 3]، أضافت هذه المواصفة دعمًا لتعدد الخلفيات، ولإعطاء قيمتين للتكرار (واحدة على كل محور)، وأضافت الكلمتين المحجوزتين <code>space</code> و <code>round</code>. | ||
المراجعة الحالية بتاريخ 04:05، 18 مارس 2018
الخاصية background-position في CSS تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا.
افتراضيًا، ستُقصّ الصورة إلى أبعاد العنصر، لكن يمكن أن تغيير أبعادها لتتسع داخله (باستخدام القيمة round) أو توزيعها بانتظام بين أطراف العنصر (باستخدام القيمة space).
بطاقة الخاصية
| القيمة الابتدائية | repeat
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | قائمة فيها أكثر من عنصر، وكل عنصر يتألف من كلمتين محجوزتين، وكل كلمة محجوزة تمثِّل طريقة التكرار في ذاك الاتجاه. |
/* تحديد قيمة واحدة */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/* horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
/* القيم العامة */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;
أمثلة
القاعدة الآتية ستؤدي إلى تكرار صورة الخلفية (المُحدَّدة عبر الخاصية background-image) على المحور الأفقي (x) فقط:
background-repeat: repeat-x;
أما القاعدة الآتية فستؤدي إلى تكرار صورة الخلفية background-image على المحور الرأسي (y) فقط:
background-repeat: repeat-y;
وهذه القاعدة ستؤدي إلى عدم تكرار صورة الخلفية الخلفية background-image، أي أنها ستعرَض مرةً واحدةً فقط:
background-repeat: no-repeat;
المُحدِّد الآتي سيضبط صورة خلفية على العنصر <p> وسيوسِّطها (باستخدام الخاصية background-position) وسيكرِّرها على المحور الرأسي (y) فقط:
p {
background-image: url(image.png);
background-position: center;
background-repeat: repeat-y;
}
أما المُحدِّد الآتي فسيضبط صورتَي خلفية على العنصر <div>، وسيُكرِّر أول صورة على المحور الأفقي (x)، وسيعرض الصورة الثانية دون تكرار:
div {
background-image: url(image-1.png), url(image-2.png);
background-repeat: repeat-x, no-repeat;
}
وفي المُحدِّد الآتي ستتكرر الصورة لأي عدد يلزم لتغطية كاملة مساحة الخلفية، وستُقص آخر صورة إن لم تتسع.
div {
background-image: url(image.png);
background-repeat: space;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4.0 | 3.5 | 1.0 |
| تعدد الخلفيات، والقدرة على تحديد قيمتين | 1.0 | 13.0 | 9.0 | 10.5 | 1.3 |
| الكلمتان المحجوزتان round و space | مدعومة | 49.0 | 9.0 | 10.5 | مدعومة |
البنية العامة
<repeat-style>
إذا استخدمنا قيمةً واحدةً فسنكون قد استعملنا صيغةً مختصرةً بدلًا من تحديد قيمتين:
- القيمة
repeat-xتكافئrepeat no-repeat - القيمة
repeat-yتكافئno-repeat repeat - القيمة
repeatتكافئrepeat repeat - القيمة
spaceتكافئspace space - القيمة
roundتكافئround round - القيمة
no-repeatتكافئno-repeat no-repeat
عند تحديد قيمتين، ستُمثِّل أوّل قيمة كيف ستتكرر الصورة على المحور الأفقي وستُمثِّل القيمة الثانية كيف ستتكرر الصورة على المحور الرأسي، وسنشرح كيف ستؤثر كل قيمة من القيم الممكنة على سلوك التكرار في كل اتجاه.
repeat
ستتكرر الصورة لأي عدد يلزم لتغطية كاملة مساحة الخلفية، وستُقص آخر صورة إن لم تتسع.
space
ستتكرر الصورة لأي عدد يلزم لتغطية كاملة مساحة الخلفية دون أن تُقصّ، وستُثبّت أوّل وآخر صورة على جانبي العنصر، وستوزّع الفراغات بالتساوي بين الصور.
سيتم تجاهل الخاصية background-position إلا إذا كان من الممكن عرض صورة واحدة دون قص. والحالة الوحيدة التي ستُقصّ فيها صورة الخلفية عند استخدام القيمة space هي أنَّ مساحة الخلفية التابعة للعنصر لا تتسع لعرض صورة واحدة.
round
تسمح هذه الخاصية بتغيير أبعاد صورة الخلفية كيلا يُترَك فراغ، إلى أن تكون هنالك مساحة فارغة تناسب تكرار الصورة مجددًا (أي أنَّ الفراغ المتبقي أكبر أو يساوي نصف عرض الصورة). وعندما تُضاف صورة جديدة فستقل أبعاد جميع الصور لكي تتسع الصورة الجديدة.
مثال للتوضيح: لنفترض أنَّ لدينا صورة أبعادها الأصلية 260 بكسل، وهي مكررة 3 مرات، فربما ستزيد أبعادها لتصبح بعرض 300 بكسل لكيلا يُترَك فراغ، وعند إضافة صورة جديدة، فستقل أبعادها لتصبح 225 بكسل كي تتسع صورة جديدة.
no-repeat
لن يتم تكرار الصورة (وليس من الضروري أن تغطي الصورة كامل مساحة الخلفية)، وسيُحدَّد موضع صورة الخلفية (التي لن تتكرر) باستخدام خاصية background-position.
البنية الرسمية
background-position: <repeat-style>#;
يمكن تكرار القيمة أكثر من مرة لكي تُمثِّل طريقة تكرار كل صورة من صور الخلفية، وسيُفصَل بينها بفاصلة.
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
backgroundوهي:background-clip، وbackground-color، وbackground-image، وbackground-origin، وbackground-position، وbackground-size، وbackground-attachment.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة دعمًا لتعدد الخلفيات، ولإعطاء قيمتين للتكرار (واحدة على كل محور)، وأضافت الكلمتين المحجوزتين
spaceوround. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.