الخاصية background-clip

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

انظر أيضًا

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