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

موضع الخلفيات الصور في لغة CSSCSS Background Origin

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

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

CSS Background Origin موضع الخلفيات الصور في لغة CSS

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


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

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

CSS background-origin syntax

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

HTML 
background-origin:value;

CSS background origin values

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

HTML 
background-origin:padding-box|border-box|content-box|initial|inherit;

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

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

جرّب بنفسك

CSS background origin padding box

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

HTML 
#box
{
  background-image:url('https://www.closetag.com/images/background.jpg');
  background-repeat: no-repeat;
  background-origin:padding-box;
  height:240px;
  width:304px;
  padding:30px;
  border:gray dashed 10px;
}
جرّب بنفسك

CSS background origin border box موضع الخلفيات الصور بدأ من border-box في لغة CSS

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

جرّب بنفسك

CSS background origin border box

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

HTML 
#box
{
  background-image:url('https://www.closetag.com/images/background.jpg');
  background-repeat: no-repeat;
  background-origin:border-box;
  height:240px;
  width:304px;
  padding:30px;
  border:gray dashed 10px;
}
جرّب بنفسك

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

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

جرّب بنفسك

CSS background origin content box

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

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

مشاركة

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

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