إضافة الخلفية في CSS

أخر تحديث لهذه المقالة في: 18 نوفمبر 2020 الساعة: 08:40 ص

🤹‍♀️ لون الخلفية

في أحيان كثيرة نحب أن نغير لون الخلفية لصفحات الويب ، و لتحقيق ذلك، نستخدم أحد خواص  CSS  و هي :   background-color . و الطريقة طبعاً سهلة، تماماً مثل استخدام خاصية الألوان color .  بمعنى أنه يمكنك كتابة إسم اللون أو كتابته بترميز سداسي عشري أو استخدام طريقة RGB.

للإضافة  لون خلفية إلى صفحة الويب ، لا بد أن ندرجها داخل <body>. لأن <body> يمثل صفحة الويب بأكملها ! تذكر هذا جيِّداً 📙 .

 

🎯 ركز على ملف CSS هذا بعناية فائقة:

 

 

⚽️ هنا ستظهر نتيجة هذا الرمز:

 

نص أصفر على خلفية خضراء

👀 كما تلاحظ فإن كتابة النص بعد <body> أخذت  اللون الأصفر ، وجميع الفقرات <p>والعناوين  <h1> أخذت هذا اللون. كيف تَمَّ ذلك؟ و لماذا؟

 

 

 

أردت أن أغتنم هذه الفرصة لأتحدث إليكم حول هذا الموضوع. وتسمى هذه الظاهرة الميراث. أؤكد لك على الفور ، لا أحد ميت.

 

ال CSS والميراث

في CSS ، إذا قمت بتطبيق نمط على علامة ما ، فستتخذ جميع العلامات الداخلية نفس النمط.

انها في الواقع بسيطة وبديهية .فالعلامة <body> تحتوي، على علامات <p> للفقرة و <h1> للعناوين ، و أشياء أخرى كثيرة.

إذا قُمْتُ بتطبيق لون خلفية خضراء ولون نص أصفر على العلامة <body> ، فإن جميع عناويني  وفقراتي  ستحتوي أيضًا على خلفية خضراء ونص أصفر … هذه هي الظاهرة التي تسمى الميراث: نقول أن العلامات الموجودة داخل علامة أخرى “ترث” من خصائصها.

فائــدة:
من هنا يأتي إسم “CSS” ،  يعني « Cascading Style Sheets » أي « Feuilles de style en cascade » ، بمعنى:  « أوراق الأنماط المتتالية ». يتم توارث خصائص CSS في التّتالي:  إذا أعطيت نمطًا لعنصر ، فسيكون لكل العناصر الفرعية نفس النمط.
هذا يعني أنّ كُلَّ نص صفحتي على الويب سيُكتب بالضرورة باللون الأصفر؟

في الحقيقة ، ليس بالضرورة. إذا أردت لاحقًا أن تكون بعض الأسماء باللون الأزرق ، فسيكون لهذا النمط أولوية وستكون أسماؤك فعلاً باللون الأزرق. من ناحية أخرى ، إذا لم تشر إلى أي شيء خاص (كما فعلنا سابقًا) ، فسترث ألقابك اللون الأصفر.
معلومة أخرى يجب استعابها، في خصائص CSS، الوريث لا يشمل فقط  ما ذكرنا، بل يتعداها إلى أشياءٍ أخرى،  على سبيل المثال ، يمكنك المطالبة بخط عريض في العلامة <body> وستكون جميع عناوينك وفقراتها بالخط العريض.

 

مثال على الميراث مع العلامة <mark> يعتقد البعض أنه بإمكاننا فقط تغيير لون خلفية الصفحة. والحال أنه يمكننا تغيير خلفية أي عنصر: الأسماء ، الفقرات وبعض الكلمات … في هذه الحالة ، سوف تظهر مظللة (كما لو أننا وضعنا علامة عليها). مثال

هل تتذكر ، على سبيل المثال ، العلامة <mark> التي تتيح لك تمييز بعض الكلمات؟ لنستخدمها مرة أخرى هنا:

 

افتراضيًا ، يتم عرض النص على خلفية صفراء. ويمكنك تغيير هذا السلوك في CSS:

 

 

في نص العلامة <mark> ، يكون لون الخلفية الخضراء هو الذي ينطبق. في الواقع ، حتى لو كان الجزء السفلي من الصفحة باللون الأسود ، فإن خاصية CSS هي العنصر الأكثر دقة الذي له الأولوية (الشكل التالي).

 

نص مظلل باللون الأسود على خلفية خضراء

ينطبق نفس المبدأ على جميع علامات HTML وخصائص CSS! إذا قلت:

  • فقراتي لها حجم 1.2 em ؛
  •  حجم النصوص المهمة ( strong ) لديها حجم 1.4 em

سيذهب تفكيرك إلى وجود صراع حقيقي. فالنص المهم هو جزء من فقرة ، إذن ما الحجم الذي ستخصصه لها؟  هل 1.2 em  أو 1.4 em؟

 CSS يتدخل هنا ليقرر أن  أكثر العبارات دقة هي التي تفوز! وبما أن <strong> عنصر أكثر تحديداً من الفقرات ، فسيتم كتابتها بحجم 1.4 em.

صور الخلفية


في الأمثلة التالية ، سوف أقوم بتعديل صورة خلفية الصفحة. و يتم تطبيقها مثل لون الخلفية ، فهي  لا تنطبق بالضرورة على الصفحة بأكملها. بل يمكنك أيضًا وضع صورة خلفية خلف العناوين والفقرات وما إلى ذلك.


تطبيق صورة الخلفية

 

للإشارة إلى صورة خلفية نستعمل الخاصية :  background-image  و ستعمل url “nom_de_l_image.png”  كقيمة  مثلا :

 

و هذه هي النتيجة:

 

صورة خلفية على الصفحة

أشير إلى أن امتداد صور الخلفية لا يقتصر على   JPG  بل يمكنك استعمال PNG أو GIF .
و عنوان الصورة يمكنك كتابته حسب تموقعها إما بهذا الشكل http://  أو فقط  image.jpg .

 

فائــدة:
⛳️كن حذرًا عندما تكتب عنوان نسبي  على هذا الشكل ( image.jpg) مثلاً  في ملف CSS! يجب الإشارة إلى عنوان الصورة بالنسبة إلى ملف css. وليس مقارنته بملف html. لتبسيط الأشياء ، أنصحك بوضع صورة الخلفية في نفس المجلد الذي يتواجد به ملف css (أو في مجلد فرعي مع الاشارة اليه في الرابط).

 

الخيارات المتاحة لصورة الخلفية

يمكننا إكمال صورة background-image التي شاهدناها للتو من خلال العديد من الخصائص الأخرى التي يمكن أن تغير سلوك صورة الخلفية.

background-attachment :تثبيت الخلفية

تتيح لك خاصية   CSS استعمال background-attachment”تثبيت” الخلفية و تجميدها. هذا التأثير مثير للاهتمام لأننا سنرى النص “ينزل” إلى الأسفل. بينما الخلفية لا تتحرك.

و هناك قيمتان لصورة الخلفية:

ثابت: تظل صورة الخلفية ثابتة لا تتحرك.

التمرير: يتم تمرير صورة الخلفية مع النص ( و هاته القيمة افتراضية).

 

 

background-repeat : تكرار الخلفية
بشكل افتراضي ، صورة الخلفية تكون متكررة.  يمكنك تغيير ذلك باستخدام خاصية
background-repeat
no-repeat :لن تتكرر الخلفية. ستكون الصورة وحيدة على الصفحة.

repeat-x :سيتم تكرار الخلفية فقط على السطر الأول ، أفقياً.

repeat-y :سيتم تكرار الخلفية فقط في العمود الأول ، رأسياً.

repeat :سيتم تكرار الخلفية بشكل افتراضي في كل الصفحة .

مثال على الاستخدام:

 

إقرأ أيضاً: إضافة صورة لخلفية في مقالة ووردبريس

background-position موضع الخلفية

يمكنك تحديد المكان الذي يجب أن تكون فيه صورة الخلفية عبر الرمز  background-position. هذه الخاصية لا تكون مثيرة للاهتمام إلا إذا تم دمجها مع background-repeat: no-repeat;  (خلفية لا تتكرر).

يجب عليك إعطاء لموضع الخلفية قيمتين بالبكسل للإشارة إلى موضع الخلفية بالنسبة للزاوية العلوية اليسرى من الصفحة (أو الفقرة ، إذا قمت بتطبيق الخلفية على فقرة). لذلك ، إذا كتبت:

 

 

 ستكون خلفيتك 30 بكسل من اليسار و 50 بكسل من الأعلى. من الممكن أيضًا استخدام هذه القيم باللغة الإنجليزية:

top :  إلى الأعلى ؛

bottom : إلى الأسفل.

left : إلى اليسار ؛

center : توسيط إلى المركز.

right : إلى اليمين.

من الممكن الجمع بين هذه الكلمات. على سبيل المثال ، لمحاذاة الصورة في أعلى اليمين ، ستكتب:

 

 

لذلك ، إذا كنت أرغب في عرض صورة الانفجار في الخلفية (الشكل التالي) ، إذا أردتَ  في نسخة واحدة تَسْتعملُ no-repeat ، إذا أردتها أن تكون  مرئية دائمًا تستعمل  fixed  أو وضعها في أعلى اليمين نستعمل  top right، فإننا نكتب :

 

 

انفجار يوضع في صورة الخلفية في أعلى اليمين

الجمع بين الخصائص

إذا كنت تستخدم الكثير من الخصائص المتعلقة بالخلفية (كما هو الحال في هذا المثال الأخير) ، يمكنك استخدام خاصية background التي يمكن أن تجمع قيمتها بين العديد من الخصائص التي تمت مشاهدتها سابقًا:

background-image ،  background-repeat،  background-attachment و  background-position.

لذلك يمكننا ببساطة كتابة:

 

 

ما يجب معرفته لحد الآن هو أن :

  • ترتيب القيم لا يهم. و يمكنك الجمع بين القِيَم في أيِّ ترتيب.
  • لا يلزمك وضع جميع القيم. لذلك ، إذا كنت لا ترغب في كتابة  fixed، يمكنك إزالته دون مشكلة.

عدة صور الخلفية

 مـع CSS3 ، من الممكن إعطاء عدة صور خلفية لعنصر. لذلك ، يكفي فصل التصريحات بفاصلة ، مثل هذا:

 

 

سيتم وضع الصورة الأولى من هذه القائمة في الترتيب الأول  (الشكل التالي).

كن حذرًا ، يعد ترتيب إعلان الصور أمراً مهماً: إذا عَكَسْتَ الانفجار  والغروب في كود CSS السابق ، فلن ترى الافجار بعد الآن! لأن الغروب سيخفيه.

 

صور خلفية متعددة

لاحظ أن صور الخلفية المتعددة تعمل على جميع المتصفحات باستثناء الإصدارات القديمة من Internet Explorer ، والتي تتعرف فقط على هذه الميزة من الإصدار 9 (IE9).


 

 

 قبل الانتهاء من صور الخلفية عليك أن تعرف أمراً مهماً:

في كل هذه الأمثلة ، قمت بتطبيق خلفية على الصفحة بأكملها . ولكن لا ينبغي أن  تنسى أنه يمكنك تطبيق خلفية على أي عنصر  عنوان ، فقرة ، بعض كلمات فقرة ، إلخ… أنصحك بمحاولة تطبيق خلفية على العناوين أو الفقرات. مع الجد و المثابرة سترتقي عالياً .

أتمنى لك التوفيق 

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 292 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 2٬073