الفرق بين المراجعتين ل"CSS/background-origin"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
(إضافة قسمين ومثال)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>background-origin</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>background-origin</code>}}</noinclude>
−
الخاصية <code>background-clip</code> في CSS تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>.<syntaxhighlight lang="css">
+
الخاصية <code>background-clip</code> في CSS تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>.
−
/* الكلمات المحجوزة */
 
−
background-origin: border-box;
 
−
background-origin: padding-box;
 
−
background-origin: content-box;
 
  
−
/* القيم العامة */
+
لاحظ أنَّ الخاصية <code>background-origin</code> لن يكون لها تأثير عند ضبط قيمة الخاصية <code>[[CSS/background-attachment|background-attachment]]</code> إلى <code>[[CSS/background-attachment#fixed|fixed]]</code>.
−
background-origin: inherit;
 
−
background-origin: initial;
 
−
background-origin: unset;
 
−
</syntaxhighlight>لاحظ أنَّ الخاصية <code>background-origin</code> لن يكون لها تأثير عند ضبط قيمة الخاصية <code>[[CSS/background-attachment|background-attachment]]</code> إلى <code>[[CSS/background-attachment#fixed|fixed]]</code>.
 
  
 
لاحظ أنَّ الخاصية المختصرة <code>[[CSS/background|background]]</code> ستؤدي إلى إعادة ضبط قيمة هذه الخاصية إلى قيمتها الابتدائية إذا لم تُحدَّد فيها.
 
لاحظ أنَّ الخاصية المختصرة <code>[[CSS/background|background]]</code> ستؤدي إلى إعادة ضبط قيمة هذه الخاصية إلى قيمتها الابتدائية إذا لم تُحدَّد فيها.
 +
 +
== بطاقة الخاصية ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 29: سطر 23:
 
! scope="row" |القيمة المحسوبة
 
! scope="row" |القيمة المحسوبة
 
|كما حُدِّدَت.
 
|كما حُدِّدَت.
−
|}
+
|}<syntaxhighlight lang="css">
 +
/* الكلمات المحجوزة */
 +
background-origin: border-box;
 +
background-origin: padding-box;
 +
background-origin: content-box;
  
 +
/* القيم العامة */
 +
background-origin: inherit;
 +
background-origin: initial;
 +
background-origin: unset;
 +
</syntaxhighlight>
 
== أمثلة ==
 
== أمثلة ==
 
مثال عن استخدام العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> مع تحديد صورة خلفية (<code>[[CSS/background-image|background-image]]</code>) مكررة لمرة واحدة (<code>[[CSS/background-repeat|background-repeat]]</code>) وضبطنا لون الخلفية إلى الفضي (<code>[[CSS/background-color|background-color]]</code>) ولون النص (<code>[[CSS/color|color]]</code>) إلى اللون الأبيض، لاحظ أنَّنا أضفنا إطارًا سميكًا <code>[[CSS/border|border]]</code> وحاشيةً <code>[[CSS/padding|padding]]</code> كي يكون الفرق بين تأثير القيم جليًّا.
 
مثال عن استخدام العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> مع تحديد صورة خلفية (<code>[[CSS/background-image|background-image]]</code>) مكررة لمرة واحدة (<code>[[CSS/background-repeat|background-repeat]]</code>) وضبطنا لون الخلفية إلى الفضي (<code>[[CSS/background-color|background-color]]</code>) ولون النص (<code>[[CSS/color|color]]</code>) إلى اللون الأبيض، لاحظ أنَّنا أضفنا إطارًا سميكًا <code>[[CSS/border|border]]</code> وحاشيةً <code>[[CSS/padding|padding]]</code> كي يكون الفرق بين تأثير القيم جليًّا.
سطر 36: سطر 39:
 
شيفرة HTML:<syntaxhighlight lang="html">
 
شيفرة HTML:<syntaxhighlight lang="html">
 
<div class="border-box">
 
<div class="border-box">
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
 
</div>
 
</div>
  
 
<div class="padding-box">
 
<div class="padding-box">
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
 
</div>
 
</div>
  
 
<div class="content-box">
 
<div class="content-box">
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
 
</div>
 
</div>
 +
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
div {
 
div {
سطر 51: سطر 55:
 
   padding: 10px;
 
   padding: 10px;
 
   color: white;
 
   color: white;
−
   background-image: url(image.png);
+
   background-image: url(bg-image.png);
−
   background-color: gray;
+
   background-color: lightgreen;
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
}
 
}
سطر 67: سطر 71:
 
   background-origin: content-box;
 
   background-origin: content-box;
 
}
 
}
 +
 
</syntaxhighlight>لاحظ كيف يمكننا تحديد قيم متعددة للخاصية <code>background-origin</code> في القاعدة نفسها في حال كانت لدينا أكثر من صورة خلفية:<syntaxhighlight lang="css">
 
</syntaxhighlight>لاحظ كيف يمكننا تحديد قيم متعددة للخاصية <code>background-origin</code> في القاعدة نفسها في حال كانت لدينا أكثر من صورة خلفية:<syntaxhighlight lang="css">
 
div {
 
div {
سطر 94: سطر 99:
 
يمكن أن تستعمل في الخاصية <code>background-origin</code> كلمة محجوزة أو أكثر من الكلمات الآتية  
 
يمكن أن تستعمل في الخاصية <code>background-origin</code> كلمة محجوزة أو أكثر من الكلمات الآتية  
  
−
=== القيمة <code><box></code> ===
+
=== <code><box></code> ===
  
 
==== <code>border-box</code> ====
 
==== <code>border-box</code> ====
سطر 114: سطر 119:
 
</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-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> لضبط لون العنصر.
 +
*صفحة الخاصية <code>[[CSS/box-sizing|box-sizing]]</code>.
 +
*الحواشي <code>[[CSS/padding|padding]]</code>.
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
 
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-origin. CSS Backgrounds and Borders Module Level 3].  
 
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-origin. CSS Backgrounds and Borders Module Level 3].  

مراجعة 03:30، 18 مارس 2018

الخاصية background-clip في CSS تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية background-image.

لاحظ أنَّ الخاصية background-origin لن يكون لها تأثير عند ضبط قيمة الخاصية background-attachment إلى fixed.

لاحظ أنَّ الخاصية المختصرة background ستؤدي إلى إعادة ضبط قيمة هذه الخاصية إلى قيمتها الابتدائية إذا لم تُحدَّد فيها.

بطاقة الخاصية

القيمة الابتدائية padding-box
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت. 
/* الكلمات المحجوزة */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* القيم العامة */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

أمثلة

مثال عن استخدام العنصر <div> مع تحديد صورة خلفية (background-image) مكررة لمرة واحدة (background-repeat) وضبطنا لون الخلفية إلى الفضي (background-color) ولون النص (color) إلى اللون الأبيض، لاحظ أنَّنا أضفنا إطارًا سميكًا border وحاشيةً padding كي يكون الفرق بين تأثير القيم جليًّا.

شيفرة HTML:

<div class="border-box">
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</div>

<div class="padding-box">
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</div>

<div class="content-box">
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</div>

شيفرة CSS:

div {
  border: 10px double;
  padding: 10px;
  color: white;
  background-image: url(bg-image.png);
  background-color: lightgreen;
  background-repeat: no-repeat;
}

.border-box {
  background-origin: border-box;
}

.padding-box {
  background-origin: padding-box;
}

.content-box {
  background-origin: content-box;
}

لاحظ كيف يمكننا تحديد قيم متعددة للخاصية background-origin في القاعدة نفسها في حال كانت لدينا أكثر من صورة خلفية:

div {
  background-image: url(image-1.png), url(image-2.png);
  background-origin: content-box, padding-box;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 4.0 9.0 10.5 3.0

البنية العامة

يمكن أن تستعمل في الخاصية background-origin كلمة محجوزة أو أكثر من الكلمات الآتية

<box>

border-box

سيكون موضع الخلفية نسبيًا إلى حدود الإطار الخارجي (border).

padding-box

سيكون موضع الخلفية نسبيًا إلى حدود منطقة الحاشية (padding).

content-box

سيكون موضع الخلفية نسبيًا إلى صندوق المحتوى (content box).

البنية الرسمية

background-clip: <box>#;

يمكن تكرار القيمة <box> أكثر من مرة بفصلها بفاصلة لكي تُعرِّف مبدأ كل صورة من صور الخلفية.

<box> = border-box | padding-box | content-box

انظر أيضًا

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

مجلوبة من "https://wiki.hsoub.com/index.php?title=CSS/background-origin&oldid=3459"