تستخدم خصائص الخلفية لتطبيق تأثيرات معينة على خلفية التصميم بشكل عام .
لون الخلفية / background color
تستخدم خاصية لون الخلفية background-color لتحديد لون خلفية عنصر معين في صفحة الويب .
يحدد لون خلفية صفحة الويب من خلال تطبيق لون الخلفية على المنتقى body .
مثال
body {background-color: #b0c4de;}
هناك 3 أنواع لتخصيص اللون باستخدام CSS كما يلي :
- باستخدام قيمة HEX مثال "#FFFFFF"
- باستخدام قيمة RGB مثال "rgb(255,0,0)"
- باستخدام اسم اللون مثل "Red"
في هذا المثال يتبين أن الوسوم h1, p, div لديهم ألوان خلفية مختلفة :
h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}
صورة الخلفية / Background Image
تستخدم خاصية صورة الخلفية background-image لتحديد صورة كخلفية لعنصر معين
تتكرر الصورة بشكل افتراضي حتى تغطي العنصر المدخلة اليه
يتم تحديد صورة خلفية صفحة الويب كما في المثال التالي :
body {background-image: url('smile.jpg');}
تكرار صورة الخلفية – أفقي أو عمودي
حسب الاعدادات الافتراضية سيتم تكرار الصورة في كلا الجانبين الأفقي والعمودي
يجب اختيار الصورة والمكان بشكل جيد وتحديد فيما اذا كان يتوجب تكرارها بشكل أفقي أو عمودي أو بدون تكرار حسب تصميم ومكان العنصر لديك
اذا أردت تكرار الصورة بشكل أفقي عندها يمكنك استخدام القيمة repeat-x وستصبح الخلفية كما في المثال التالي :
body { background-image: url('smile.jpg'); background-repeat: repeat-x; }
اذا أردت تكرار الصورة بشكل عمودي عندها يمكنك استخدام القيمة repeat-y وستصبح الخلفية كما في المثال التالي :
body { background-image: url('smile.jpg'); background-repeat: repeat-y; }
صورة الخلفية – ضبط الموضع وعدم التكرار
عند استخدام صورة كخلفية للموقع , استخدم صورة بحيث لاتخفي النص المكتوب تحتها
يمكن اظهار الصورة في الخلفية لمرة واحدة من خلال خاصية background-repeat
مثال
body { background-image: url(smile.jpg'); background-repeat: no-repeat; }
يمكن للصورة أن تخفي النص أو عدم اظهاره بشكل واضح لذلك يمكننا التعديل على موضع الصورة أي تحديد المكان الصحيح لاظهار الصورة في الخلفية وهنا يمكننا استخدام الخاصية background-position
مثال
body { background-image: url('smile.jpg'); background-repeat: no-repeat; background-position: right top; }
اختصار خاصية الخلفية – background
لاحظ من خلال الأمثلة السابقة هناك العديد من الخاصيات التي تتعامل مع الخلفية background
يمكن اختصار الكود وجمعهم في خصيصة واحدة بدلاً من وضع جميع الخاصيات لاحظ المثال التالي :
body {background:#ffffff url('smile.jpg') no-repeat right top;}
كما تلاحظ يمكننا جمع جميع الخصائص بخصيصة واحدة ولكن يجب الانتباه الى أن وضع القيم يجب أن تكون مرتبة كما يلي تماماً كما سيتم ترتيبهم حسب الخصائص كالتالي :
- لون الخلفية / background-color
- صورة الخلفية / background-image
- تكرار الخلفية / background-repeat
- مرفقات الخلفية / background-attachment
- موضع الخلفية / background-position
لايهم اذا كانت احدى القيم غير موجودة ولكن الأهم المحافظة على ترتيبهم تماماً كما ذكرت
الخاصية | الوصف |
---|---|
background | يمكن ضبط جميع قيم الخلفيات بخاصية واحدة |
background-attachment | تحديد صورة الخلفية سواء مثبتة أو متحركة إلى نهاية الصفحة |
background-color | تحديد لون خلفية العنصر |
background-image | تحديد صورة خلفية العنصر |
background-position | تحديد بداية المكان لصورة الخلفية |
background-repeat | تحديد كيفية تكرار صورة الخلفية |
ليست هناك تعليقات:
إرسال تعليق