الفرق بين المراجعتين ل"CSS/background-clip"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
(إضافة قسمين) |
|||
| (مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 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>. | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-clip CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-clip CSS Backgrounds and Borders Module Level 3]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Background]] | + | [[تصنيف:CSS Background|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 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.