CSS

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

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

التاريخ

28 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

791

المواضيع

24
الشروحات chevron_left CSS Background Origin chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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

background-origin:value;
CSS background origin values

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

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.

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

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

#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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

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