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

<noinclude>{{DISPLAYTITLE:الخاصية <code>background-clip</code>}}</noinclude>
الخاصية <code>background-clip</code> في CSS تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <code>[[CSS/color value|<color>]]</code> أو صورةً <code>[[CSS/image|<image>]]</code>.

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

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>border-box</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}<syntaxhighlight lang="css">
/* الكلمات المحجوزة */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* القيم العامة */
background-clip: inherit;
background-clip: initial;
background-clip: unset;
</syntaxhighlight>
== أمثلة ==
في هذا المثال سيكون لكل عنصر قيمة مختلفة لخاصية <code>background-clip</code>. شيفرة HTML:<syntaxhighlight lang="html">
<p class="border-box">ستمتد الخلفية إلى ما وراء الإطار.</p>
<p class="padding-box">ستمتد الخلفية إلى الحدود الداخلية للإطار.</p>
<p class="content-box">ستمتد الخلفية إلى حدود صندوق المحتوى فقط.</p>
<p class="text">ستكون الخلفية مرئيةً في النص فقط.</p>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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);
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|3.5
|1.0
|-
! القيمة text
|باستخدام السابقة <code>-webkit-</code>
|49.0
|غير مدعومة
|باستخدام السابقة <code>-webkit-</code>
|باستخدام السابقة <code>-webkit-</code>
|}

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

=== <code>padding-box</code> ===
ستمتد الخلفية إلى الحافة الخارجية لمنطقة الحاشية (padding)، ولن تُرسَم الخلفية تحت الإطار.

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

=== <code>text</code> ===
ستُرسَم الخلفية ضمن النص المحتوى في العنصر. راجع قسم [[#دعم المتصفحات|دعم المتصفحات]] لمعلومات عن المتصفحات الداعمة لهذه القيمة.

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

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

</syntaxhighlight>
==انظر أيضًا==
*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/background|background]]</code> وهي:  <code>[[CSS/background-color|background-color]]</code>، و <code>[[CSS/background-image|background-image]]</code>، و <code>[[CSS/background-origin|background-origin]]</code>، و <code>[[CSS/background-position|background-position]]</code>، و <code>[[CSS/background-repeat|background-repeat]]</code>، و <code>[[CSS/background-size|background-size]]</code>، و <code>[[CSS/background-attachment|background-attachment]]</code>.
*صفحة الخاصية <code>[[CSS/border|border]]</code> لضبط إطار العنصر.
*صفحة الخاصية <code>[[CSS/color|color]]</code> لضبط لون العنصر.
*صفحة الخاصية <code>[[CSS/box-sizing|box-sizing]]</code>.
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-backgrounds-4/#background-clip CSS Backgrounds and Borders Module Level 4]، أضافت هذه المسودة القيمة <code>[[#text|text]]</code>.
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-clip CSS Backgrounds and Borders Module Level 3]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Background|{{SUBPAGENAME}}]]