انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 125
دورة لغة CSS

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

سوف تتعلم في هذا الدرس التحكم في موضع بداية الخلفيات الألوان في لغة CSS داخل العنصر الذي يحتوي هذة الخلفيات وستتعلم ثلاث طرق لها في هذ الدرس.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,005
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

عن طريق خاصية 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

HTML 
background-clip:value;

CSS background-clip values

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

HTML 
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.

HTML 
#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.

HTML 
#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.

HTML 
#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;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…