عرض مصدر CSS/background-origin

<noinclude>{{DISPLAYTITLE:الخاصية <code>background-origin</code>}}</noinclude>
الخاصية <code>background-clip</code> في CSS تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>.<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>background-origin</code> لن يكون لها تأثير عند ضبط قيمة الخاصية <code>[[CSS/background-attachment|background-attachment]]</code> إلى <code>[[CSS/background-attachment#fixed|fixed]]</code>.

لاحظ أنَّ الخاصية المختصرة <code>[[CSS/background|background]]</code> ستؤدي إلى إعادة ضبط قيمة هذه الخاصية إلى قيمتها الابتدائية إذا لم تُحدَّد فيها.
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>padding-box</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

== أمثلة ==
مثال عن استخدام العنصر <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> كي يكون الفرق بين تأثير القيم جليًّا.

شيفرة HTML:<syntaxhighlight lang="html">
<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 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 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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
div {
  border: 10px double;
  padding: 10px;
  color: white;
  background-image: url(image.png);
  background-color: gray;
  background-repeat: no-repeat;
}

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

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

.content-box {
  background-origin: content-box;
}
</syntaxhighlight>لاحظ كيف يمكننا تحديد قيم متعددة للخاصية <code>background-origin</code> في القاعدة نفسها في حال كانت لدينا أكثر من صورة خلفية:<syntaxhighlight lang="css">
div {
  background-image: url(image-1.png), url(image-2.png);
  background-origin: content-box, padding-box;
}
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|4.0
|9.0
|10.5
|3.0
|}

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

=== القيمة <code><box></code> ===

==== <code>border-box</code> ====
سيكون موضع الخلفية نسبيًا إلى حدود الإطار الخارجي (border).

==== <code>padding-box</code> ====
سيكون موضع الخلفية نسبيًا إلى حدود منطقة الحاشية (padding).

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
background-clip: <box>#;

</syntaxhighlight>يمكن تكرار القيمة <code>[[#القيم الممكنة|<box>]]</code> أكثر من مرة بفصلها بفاصلة لكي تُعرِّف مبدأ كل صورة من صور الخلفية.<syntaxhighlight lang="css">
<box> = border-box | padding-box | content-box

</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-origin. CSS Backgrounds and Borders Module Level 3]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Background|{{SUBPAGENAME}}]]