الفرق بين المراجعتين لصفحة: «CSS/background-clip»

من موسوعة حسوب
< CSS
مرئينص الويكي
لا ملخص تعديل
 
إضافة قسمين
 
(1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 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>.<syntaxhighlight lang="css">
الخاصية <code>background-clip</code> في CSS تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <code>[[CSS/color value|<color>]]</code> أو صورةً <code>[[CSS/image|<image>]]</code>.
/* الكلمات المحجوزة */
 
background-clip: border-box;
إذا لم يكن للعنصر الخاصية <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-clip: padding-box;
background-clip: content-box;
background-clip: text;


/* القيم العامة */
== بطاقة الخاصية ==
background-clip: inherit;
background-clip: initial;
background-clip: unset;
</syntaxhighlight>إذا لم يكن للعنصر الخاصية <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%;"
{| 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">The background extends behind the border.</p>
<p class="border-box">ستمتد الخلفية إلى ما وراء الإطار.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="padding-box">ستمتد الخلفية إلى الحدود الداخلية للإطار.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="content-box">ستمتد الخلفية إلى حدود صندوق المحتوى فقط.</p>
<p class="text">The background is clipped to the foreground text.</p>
<p class="text">ستكون الخلفية مرئيةً في النص فقط.</p>


</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p {
p {
   background: #05ffb0;
   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> ===
=== <code>border-box</code> ===
ستمتد الخلفية إلى الحافة الخارجية للإطار (border)، لكنها ستقع تحته.
ستمتد الخلفية إلى الحافة الخارجية للإطار (border)، لكنها ستقع تحته.


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


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


=== القيمة <code>text</code> ===
=== <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

انظر أيضًا

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/background-clip&oldid=3438»