عن طريق خاصية background-clip في لغة CSS يمكن التحكم في موضع بداية الألوان وهي أن تبدأ الخلفية اللون من بداية border إطار العنصر أو تبدأ من بداية المحتوي الداخلي للعناصر أو تبدأ من أسفل الإطار.

قيم خاصية background-clip:

padding-box هي القيمة الأفتراضية وهي أن تبدأ الخلفية اللون مع padding box بداية صندوق للعنصر.
border-box وهي أن تبدأ الخلفية اللون مع border box إطار العنصر.
content-box وهي أن تبدأ الخلفية اللون مع بداية content box صندوق المحتوي للعنصر.

CSS background-clip syntax

طريقة كتابة خاصية background-clip في لغة CSS

background-clip:value;

CSS background-clip values

قيم خاصية background-clip في لغة CSS

background-clip:padding-box|border-box|content-box|initial|inherit;

</> CSS background clip padding box
موضع الخلفيات الألوان بدأ من padding box في لغة CSS

عن طريق خاصية background-origin مع القيمة padding-box في لغة CSS تبدأ الخلفية مع padding box بداية صندوق padding للعنصر.

جربها بنفسك

CSS background clip padding box

تبدأ الخلفية اللون مع padding box بداية صندوق padding للعنصر في لغة CSS.

#box
{
  background-color:#2196F3;
  background-repeat: no-repeat;
  background-origin:padding-box;
  height:200px;
  width:200px;
  padding:30px;
  border:#ED4C67 dashed 10px;
}

جربها بنفسك

</> CSS background clip border box
موضع الخلفيات الألوان بدأ من border-box في لغة CSS

عن طريق خاصية background-origin مع القيمة border-box في لغة CSS تبدأ الخلفية مع border box إطار العنصر.

جربها بنفسك

CSS background clip border box

تبدأ الخلفية اللون مع border box إطار العنصر في لغة CSS.

#box
{
  background-color:#2196F3;
  background-repeat: no-repeat;
  background-origin:border-box;
  height:200px;
  width:200px;
  padding:30px;
  border:#ED4C67 dashed 10px;
}

جربها بنفسك

</> CSS background clip content box
موضع الخلفيات الألوان بدأ من content-box في لغة CSS

عن طريق خاصية background-origin مع القيمة content-box في لغة CSS تبدأ الخلفية مع بداية content-box صندوق المحتوي للعنصر.

جربها بنفسك

CSS background clip content box

تبدأ الخلفية اللون مع بداية content-box صندوق المحتوي للعنصر في لغة CSS.

#padding-box
{
  background-image:url('https://www.closetag.com/images/background.jpg');
  background-repeat: no-repeat;
  background-origin:content-box;
  height:240px;
  width:304px;
  padding:30px;
  border:gray dashed 10px;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Background Clip
موضع الخلفيات الألوان في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Background Clip CSS