CSS/background-origin

الخاصية 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

انظر أيضًا

• صفحة الخاصيات التي تضبطها الخاصية المختصرة background وهي: background-clip، و background-color، و background-image، و background-position، و background-repeat، و background-size، و background-attachment.
• صفحة الخاصية color لضبط لون العنصر.
• صفحة الخاصية box-sizing.
• الحواشي padding.

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

• مواصفة CSS Backgrounds and Borders Module Level 3.