CSS

CSS Background Image
خلفيات صور في لغة CSS

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

التاريخ

22 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2813

المواضيع

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

CSS Background Image
خلفيات صور في لغة CSS

</> CSS Background Image
خلفيات صور في لغة CSS

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

  • يتم تحديد القيمة عن طريقة url وهي إضافة مسار الصورة بجوار ملف HTML.
  • يمكن إضافة مسار الصورة internal أو external مسار من رابط سيرفر أخر أو من علي السيرفر المحلي.
  • يمكن أستخدام خلفيات متحركة عن طريق الأشارة إلي صور gif في مسار الصورة.


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

  • url تحديد مسار صورة الخلفية absolute url vs relative url.
  • none وهي إلغاء الخلفية الصورة في حال كانت هناك خلفية لهذا العنصر
  • initial وهي تعيين الخلفية للخلفية الافتراضية.
  • inherit وهي وراثة الخلفية من العنصر الأب parent.
backgroud syntax

طريقة كتابة القيم بداخل خاصية background-color في لغة CSS.

background-image:url|none|initial|inherit;
يجب إستخدم الصور الجذابة والتي لا تؤثر على النصوص ولا ينزعج منها المستخدم وأيضاً يجب إستخدام صور حجمها قليل لكي لا تؤثر علي اداء سرعه تحميل صفحة الويب.

</> CSS background-image url
قيمة url لخاصية background-image في لغة CSS

إستخدام قيمة url لخاصية background-image في لغة CSS لتحديد مسار صورة الخلفية.

  • تظهر خلفية العنصر بحجمه الحالي مثلاً عنصر طولة 500 بكسل وعرضة 500 فالخلفية تغطي جميع المساحة حتي وإن كانت الصورة أصغر يتم تكرارها وإذا كانت الصور اكبر من مساحة العنصر يظهر جزء منها فقط.

خاصية background-image:

  • تُكتب قمية url متبوعة بالأقواس parentheses في مع خاصية لتصبح بهذا الشكل ()background-image:url.
  • يُكتب بداخل الأقواس بعد url مسار الصورة في خاصية background-image.
  • يُكتب مسار الصورة absolute url vs relative url من مصدر خارجي أو صورة بجوار ملف CSS.
CSS background image relative url

تحديد مسار الصورة relative من صورة بجانب ملف CSS.

h1
{
background-image:url('/images/background.jpg');
}
CSS background image absolute url

تحديد مسار الصورة absolute من صورة من سيرفر خارجي وإضافة الرابط كاملاً.

h1
{
background-image:url('https://www.closetag.com/images/background.jpg');
}

</> CSS background-image none
قيمة none لخاصية background-image في لغة CSS

تُستخدم القيمة none مع خاصية background-image لألغاء صورة الخلفية في لغة CSS.

  • تمت إضافة خلفية صورة ثم قمنا بألغائها عن طريق قيمة none.
CSS background image none

إلغاء الخلفية عن طريق إستخدام القيمة none مع خاصية background-image.

h1
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-image:none;
}

</> CSS background-image inherit
قيمة inherit لخاصية background-image في لغة CSS

تُستخدم القيمة inherit مع خاصية background-image لتوريث العنصر خلفية صورة من العنصر الأب الزي يتفرع منه.

  • يتم إضافة نفس الخلفية للعنصر الأب الزي يتفرع منه العنصر الزي قمنا بتحديد القيمة inherit.
CSS background image inherit

يتم توريث الخلفية من العنصر الأب parent.

body
{
background-image:url('https://www.closetag.com/images/background.jpg');
}

h1
{
background-image:inherit;
}

</> CSS background-image initial
قيمة initial لخاصية background-image في لغة CSS

تُستخدم القيمة initial مع خاصية background-image لأعادة تعيين الخلفية للوضع الأفتراضي فيما قبل إضافة الصورة.

  • يتم تعيين القيم للوضع الأفتراضي عن طريق القيمة initial.
CSS background image initial

يتم إلغاء أي خلفيات والعودة لما قبل الخلفيات عن طريق initial مع خاصية background-image.

body
{
background-image:url('https://www.closetag.com/images/background.jpg');
}

h1
{
background-image:inherit;
background-image:initial;
}
مصطلحات الدرس
Background Image
Background Image

صورة خلفية

Value
Value

قيمة

Internal
Internal

داخلي

External
External

خارجي

Element
Element

عنصر

Body
Body

جسم المحتوي

Background
Background

خلفية

Property
Property

خاصية

Image
Image

صورة

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

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

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

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