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

أخر تحديث لهذه المقالة في: 04 مايو 2021 الساعة: 07:24 م

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


 

♦ إضافة الخلفية في CSS
في أحيان كثيرة نحب أن نغير لون الخلفية لصفحات الويب ، و لتحقيق ذلك، نستخدم أحد خواص  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:

 

إضافة الخلفية في 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، فإننا نكتب :

 

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

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

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

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

background-image ،

  background-repeat، 

background-attachment background-position.

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

 

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

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

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

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

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

 

 

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

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

 

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

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


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

 

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

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

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

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقًا

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

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

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