الخاصية background-clip

الخاصية background-clip في CSS تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <color> أو صورةً <image>.

إذا لم يكن للعنصر الخاصية background-image أو background-color، فسيغطي إطار العنصر الفرق بين قيم هذه الخاصية إلا فيما ندر (نتيجة تأثير الخاصية border-style أو border-image).

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

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

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

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

أمثلة

في هذا المثال سيكون لكل عنصر قيمة مختلفة لخاصية background-clip. شيفرة HTML:

<p class="border-box">ستمتد الخلفية إلى ما وراء الإطار.</p>
<p class="padding-box">ستمتد الخلفية إلى الحدود الداخلية للإطار.</p>
<p class="content-box">ستمتد الخلفية إلى حدود صندوق المحتوى فقط.</p>
<p class="text">ستكون الخلفية مرئيةً في النص فقط.</p>

شيفرة CSS:

p {
  background: #28832c;
  border: 4px dashed black;
  padding: 2em;
}

.border-box  { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

.text {
  background-clip: text;
  color: rgba(0, 0, 0, .2);
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	3.5	1.0
القيمة text	باستخدام السابقة -webkit-	49.0	غير مدعومة	باستخدام السابقة -webkit-	باستخدام السابقة -webkit-

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

border-box

ستمتد الخلفية إلى الحافة الخارجية للإطار (border)، لكنها ستقع تحته.

padding-box

ستمتد الخلفية إلى الحافة الخارجية لمنطقة الحاشية (padding)، ولن تُرسَم الخلفية تحت الإطار.

content-box

ستكون حدود الخلفية هي صندوق المحتوى (content box).

text

ستُرسَم الخلفية ضمن النص المحتوى في العنصر. راجع قسم دعم المتصفحات لمعلومات عن المتصفحات الداعمة لهذه القيمة.

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

background-clip: <box>#;

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

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

انظر أيضًا

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

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

• مسودة CSS Backgrounds and Borders Module Level 4، أضافت هذه المسودة القيمة text.
• مواصفة CSS Backgrounds and Borders Module Level 3.