CSS/background-clip

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

/* الكلمات المحجوزة */
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-image أو background-color، فسيغطي إطار العنصر الفرق بين قيم هذه الخاصية إلا فيما ندر (نتيجة تأثير الخاصية border-style أو border-image).

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

أمثلة

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

<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>

شيفرة CSS:

p {
  background: #05ffb0;
  border: 4px dashed;
  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

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

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