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

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

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

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

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.

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

HTML 
h1
{
background-image:url('/images/background.jpg');
}
جرّب بنفسك

CSS background image absolute url

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

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

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

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

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

h1
{
background-image:inherit;
background-image:initial;
}
جرّب بنفسك

مشاركة

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

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

ابنِ لغتك البرمجية

المصطلحات9

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 9 مفهومةأول بطاقة، أول خطوة
01 Background Image صورة خلفية
للمراجعة
02 Value قيمة
للمراجعة
03 Internal داخلي
للمراجعة
04 External خارجي
للمراجعة
05 Element عنصر
للمراجعة
06 Body جسم المحتوي
للمراجعة
07 Background خلفية
للمراجعة
08 Property خاصية
للمراجعة
09 Image صورة
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

3أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي3 أسئلة تنتظرك
01

ماهي الخاصية التي تستخدم في ال CSS لأضافة صورة كخلفية لعنصر معين ؟

____
02

هل يمكننا استخدام خاصية Background Image مع اي عنصر من عناصر ال HTML ؟

03

هل يمكننا اضافة صورة كخلفية من موقع معين علي الانترنت ؟