الفرق بين المراجعتين لصفحة: «CSS/background-clip»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
إضافة قسمين |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>background-clip</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>background-clip</code>}}</noinclude> | ||
الخاصية <code>background-clip</code> في CSS تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <code>[[CSS/color value|<color>]]</code> أو صورةً <code>[[CSS/image|<image>]]</code>.< | الخاصية <code>background-clip</code> في CSS تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <code>[[CSS/color value|<color>]]</code> أو صورةً <code>[[CSS/image|<image>]]</code>. | ||
/ | |||
background- | إذا لم يكن للعنصر الخاصية <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>). | ||
background- | |||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 28: | سطر 21: | ||
! 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"> | في هذا المثال سيكون لكل عنصر قيمة مختلفة لخاصية <code>background-clip</code>. شيفرة HTML:<syntaxhighlight lang="html"> | ||
<p class="border-box"> | <p class="border-box">ستمتد الخلفية إلى ما وراء الإطار.</p> | ||
<p class="padding-box"> | <p class="padding-box">ستمتد الخلفية إلى الحدود الداخلية للإطار.</p> | ||
<p class="content-box"> | <p class="content-box">ستمتد الخلفية إلى حدود صندوق المحتوى فقط.</p> | ||
<p class="text"> | <p class="text">ستكون الخلفية مرئيةً في النص فقط.</p> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
p { | p { | ||
background: # | background: #28832c; | ||
border: 4px dashed; | border: 4px dashed black; | ||
padding: 2em; | padding: 2em; | ||
} | } | ||
.border-box { background-clip: border-box; } | .border-box { background-clip: border-box; } | ||
.padding-box { background-clip: padding-box; } | .padding-box { background-clip: padding-box; } | ||
.content-box { background-clip: content-box; } | .content-box { background-clip: content-box; } | ||
| سطر 50: | سطر 53: | ||
.text { | .text { | ||
background-clip: text; | background-clip: text; | ||
color: rgba(0,0,0,.2); | color: rgba(0, 0, 0, .2); | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 78: | سطر 81: | ||
== البنية العامة == | == البنية العامة == | ||
=== | === <code>border-box</code> === | ||
ستمتد الخلفية إلى الحافة الخارجية للإطار (border)، لكنها ستقع تحته. | ستمتد الخلفية إلى الحافة الخارجية للإطار (border)، لكنها ستقع تحته. | ||
=== | === <code>padding-box</code> === | ||
ستمتد الخلفية إلى الحافة الخارجية لمنطقة الحاشية (padding)، ولن تُرسَم الخلفية تحت الإطار. | ستمتد الخلفية إلى الحافة الخارجية لمنطقة الحاشية (padding)، ولن تُرسَم الخلفية تحت الإطار. | ||
=== | === <code>content-box</code> === | ||
ستكون حدود الخلفية هي صندوق المحتوى (content box). | ستكون حدود الخلفية هي صندوق المحتوى (content box). | ||
=== | === <code>text</code> === | ||
ستُرسَم الخلفية ضمن النص المحتوى في العنصر. راجع قسم [[#دعم المتصفحات|دعم المتصفحات]] لمعلومات عن المتصفحات الداعمة لهذه القيمة. | ستُرسَم الخلفية ضمن النص المحتوى في العنصر. راجع قسم [[#دعم المتصفحات|دعم المتصفحات]] لمعلومات عن المتصفحات الداعمة لهذه القيمة. | ||
| سطر 98: | سطر 101: | ||
</syntaxhighlight> | </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-4/#background-clip CSS Backgrounds and Borders Module Level 4]، أضافت هذه المسودة القيمة <code>[[#text|text]]</code>. | ||
المراجعة الحالية بتاريخ 14:40، 17 مارس 2018
الخاصية 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.