CSS/background-origin

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

/* الكلمات المحجوزة */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

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

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

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

القيمة الابتدائية	padding-box
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

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

شيفرة 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>

شيفرة 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;
}

لاحظ كيف يمكننا تحديد قيم متعددة للخاصية 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

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

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