الخاصية background-clip

من موسوعة حسوب
< CSS
مراجعة 13:39، 28 أكتوبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

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

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