فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

خلفية العنصر في لغة CSS

 
 
 
 

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

  • Background-color : تحديد لون لخلفية العنصر
  • Background-image : مسؤولة عن تحديد صورة للخلفية بلاً عن اللون
  • Background-repeat : مسؤولة عن تكرار الصورة افقياً او رأسياً
  • background-attachment :  مسؤولة عن تثبيت الصورة في مكان محدد او تحريك الصورة مع حركة الــ Scroll
  • Background-position : مسؤولة عن تحديد موضع العنصر

هي الخواص المسؤولة عن التحكم في كل كبيرة وصغيرة تخص خلفية العنصر من لون او صورة او مكان وتأثيرات مختلفة يمكن تنفيذها علي الصور بأستخدام هذة الخواص


لون الخلفية Background-color 

احيانا تجد نصوص تحتوي علي خلفية بلون مختلف عن اللون الأبيض مثل نصوص ذو خلفية بلون مختلف  في تلك الحالة يتم تغيير لون الخلفية عن طريق أعطاء لون مختلف الي خلفية العنصر بأستخدام الخاصية Background-color , المسوؤلة عن التحكم في لون الخلفية ,ومن ثم تحديد اللون المطلوب . ويمكن ايضا التحكم في لون الخلفية الخاصة بأي عنصر عن طريق نفس الخاصية ,ولكن ما يتم تغييرة هو قيمة اللون الذي تريده في العنصر الخاص بك ,ويمكنك ان تستخدم طريقة ال rgb او طريقة الــ hex او كتابة اللون بالأسم الخاص بة ,لأختيار درجة اللون المطلوبة .والجدول التالي يوضح بعض أسماء الألوان التي يمكن استخدامها بمجرد اضافة الأسم الخاص بها فقد بدون أستخدام طريقة الــ hex او الـ rgb مثل الأمر التالي تم أستخدام green 


}p 
{;  background-color: green


black yellow Brown  DarkGreen 
white fuchsia Chocolate  DarkOrange 
red olive Cyan  DarkRed 
blue green DarkBlue  DimGrey 

أضافة لون عن طريق نظام الــ rgb ؟

; (255,255,255) background-color: rgb 

أضافة لون عن طريق نظام الــ Hex ؟

background-color: #f5f5f5

صورة للعنصر Background-image

يتم أختيار صورة لخلفية العنصر بشكل سهل عن طريق أمر متوفر في لغة CSS مسئول عن مهمة اختيار الصورة ووضعها في خلفية العنصر , وذلك الكود ينقسم الي جزئين , الجزء الأول هو الأمر الأساسي الذي يكتب لأعلام المتصفح بأن ما سيأتي بعدة هو مسار صورة يجب وضعها في خلفية العنصر .

والجزء الثاني هو الأمر المسؤل عن تحديد مسار الصورة علي الجهاز الخاص بك ( ) url  ,ويجب أختيار الصورة مع كتابة الأمتداد الخاص بها كما في الأمر التالي , يوجد صورة في جهازي متوفرة في نفس الفولدر الخاص بملف الــ HTML , وتلك الصورة باسم faslaa  ومن نوع gif

}h1
;  background-image: url("faslaa.gif")
}

الخاصية background-repeat

في لغة CSS عند أستدعاء صورة عن طريق الخاصية background-image ,قد تكون الصورة أصغر من خلفية العنصر ويتم تكرارها لمليء باقي الصفحة,ولتوضيح الفكرة أكثر سوف نفترض بأنك سوف تقوم بتغيير صورة خلفية الموقع من اللون الأبيض الي خلفية انت تقوم بأختيارها ,وكانت الصورة التي قمت بأختيارها أصغر من حجم الموقع ,سوف تظهر الصوررة بتكرار متعدد أفقياً ورأسياً حتي تملئ الصفحة

وللتحكم في الصورة من حيث التكرار افقياً وراسياً او أفقياً فقد او راسياً فقد او عدم تكرار الصورة نهائياً وبقائها علي حجمها الطبيعي ,يجب استخدام خاصية background-repeat ,المسؤلة عن التحكم في التكرار او لا ,وتأخذ الخاصية 4 قيم اساسية كما يلي 

تكرار أفقي repeat-x

لتكرار الصورة أفقياً فقد نستخدم القيمة repeat-x ,وهي القيمية المسؤولة عن الغاء التكرار الرأسي والبقاء علي التكرار الأفقي فقد.


background-repeat: repeat-x

تكرار رأسي repeat-y

لتكرار الصورة رأسياً فقد نستخدم القيمة repeat-x ,وهي القيمية المسؤولة عن الغاء التكرار الأفقي والبقاء علي التكرار الرأسي فقد.

background-repeat: repeat-y

عدم تكرار no-repeat

لألغاء تكرار الصورة رأسياً وأفقياً نستخدم القيمة no-repeat ,وهي مسؤولة عن بقاء الصورة بدون اي تكرار.

background-repeat:no-repeat


أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات