🤹♀️ لون الخلفية
♦ إضافة الخلفية في CSS
في أحيان كثيرة نحب أن نغير لون الخلفية لصفحات الويب ، و لتحقيق ذلك، نستخدم أحد خواص CSS و هي :
background-color . و الطريقة طبعاً سهلة، تماماً مثل استخدام خاصية الألوان
color . بمعنى أنه يمكنك كتابة إسم اللون أو كتابته بترميز سداسي عشري أو استخدام طريقة RGB.
للإضافة لون خلفية إلى صفحة الويب ، لا بد أن ندرجها داخل <body>. لأن <body> يمثل صفحة الويب بأكملها ! تذكر هذا جيِّداً .
🎯 ركز على ملف CSS هذا بعناية فائقة:
|
1 2 3 4 5 6 |
/* سنشتغل على الشفيرة body , إذن ستشمل كل الصفحة */ body { background-color: green; /* الخلفية ستكون خضراء */ color: yellow; /* النص أصفر */ } |
⚽️ هنا ستظهر نتيجة هذا الرمز:
نص أصفر على خلفية خضراء
👀 كما تلاحظ فإن كتابة النص بعد <body> أخذت اللون الأصفر ، وجميع الفقرات <p>والعناوين <h1> أخذت هذا اللون. كيف تَمَّ ذلك؟ و لماذا؟
أردت أن أغتنم هذه الفرصة لأتحدث إليكم حول هذا الموضوع. وتسمى هذه الظاهرة الميراث. أؤكد لك على الفور ، لا أحد ميت.
ال CSS والميراث
في CSS ، إذا قمت بتطبيق نمط على علامة ما ، فستتخذ جميع العلامات الداخلية نفس النمط.
انها في الواقع بسيطة وبديهية .فالعلامة <body> تحتوي، على علامات <p> للفقرة و <h1> للعناوين ، و أشياء أخرى كثيرة.
إذا قُمْتُ بتطبيق لون خلفية خضراء ولون نص أصفر على العلامة <body> ، فإن جميع عناويني وفقراتي ستحتوي أيضًا على خلفية خضراء ونص أصفر … هذه هي الظاهرة التي تسمى الميراث: نقول أن العلامات الموجودة داخل علامة أخرى “ترث” من خصائصها.
في الحقيقة ، ليس بالضرورة. إذا أردت لاحقاً أن تكون بعض الأسماء باللون الأزرق ، فسيكون لهذا النمط أولوية وستكون أسماؤك فعلاً باللون الأزرق. من ناحية أخرى ، إذا لم تشر إلى أي شيء خاص (كما فعلنا سابقًا) ، فسترث ألقابك اللون الأصفر.
معلومة أخرى يجب استعابها، في خصائص CSS، الوريث لا يشمل فقط ما ذكرنا، بل يتعداها إلى أشياءٍ أخرى، على سبيل المثال ، يمكنك المطالبة بخط عريض في العلامة
<body> وستكون جميع عناوينك وفقراتها بالخط العريض.
مثال على الميراث مع العلامة <mark> يعتقد البعض أنه بإمكاننا فقط تغيير لون خلفية الصفحة. والحال أنه يمكننا تغيير خلفية أي عنصر: الأسماء ، الفقرات وبعض الكلمات … في هذه الحالة ، سوف تظهر مظللة (كما لو أننا وضعنا علامة عليها). مثال
هل تتذكر ، على سبيل المثال ، العلامة <mark> التي تتيح لك تمييز بعض الكلمات؟ لنستخدمها مرة أخرى هنا:
|
1 2 3 4 |
<body> <font align="center"> <h1> هنا العنوان في الوسط </h1> </font> <h2> هنا الكتابة تظهر في اليمين</h2> <p> أهلاً و<mark> مرحباً بكم </mark> في موقعي الجديد </p> |
افتراضياً ، يتم عرض النص على خلفية صفراء. ويمكنك تغيير هذا السلوك في CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body { background-color: green; color: yellow; } mark { /* لون الخلفية له الأسبقية على الصفحة بأكملها*/ background-color: black; color: green; } |
إضافة الخلفية في 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” كقيمة مثلا :
|
1 2 3 4 |
body { background-image: url("crépuscule.jpg"); } |
و هذه هي النتيجة:
صورة خلفية على الصفحة
أشير إلى أن امتداد صور الخلفية لا يقتصر على JPG بل يمكنك استعمال PNG أو GIF .
و عنوان الصورة يمكنك كتابته حسب تموقعها إما بهذا الشكل
http:// أو فقط
image.jpg .
الخيارات المتاحة لصورة الخلفية
يمكننا إكمال صورة background-image التي شاهدناها للتو من خلال العديد من الخصائص الأخرى التي يمكن أن تغير سلوك صورة الخلفية.
background-attachment :تثبيت الخلفية
تتيح لك خاصية CSS استعمال background-attachment”تثبيت” الخلفية و تجميدها. هذا التأثير مثير للاهتمام لأننا سنرى النص “ينزل” إلى الأسفل. بينما الخلفية لا تتحرك.
و هناك قيمتان لصورة الخلفية:
ثابت: تظل صورة الخلفية ثابتة لا تتحرك.
التمرير: يتم تمرير صورة الخلفية مع النص ( و هاته القيمة افتراضية).
|
1 2 3 4 5 |
body { background-image: url("crépuscule.jpg"); background-attachment: fixed; /* الخلفية تكون ثابتة */ } |
background-repeat : تكرار الخلفية
بشكل افتراضي ، صورة الخلفية تكون متكررة. يمكنك تغيير ذلك باستخدام خاصية
- background-repeat
- no-repeat :لن تتكرر الخلفية. ستكون الصورة وحيدة على الصفحة.
- repeat-x :سيتم تكرار الخلفية فقط على السطر الأول ، أفقياً.
- repeat-y :سيتم تكرار الخلفية فقط في العمود الأول ، رأسياً.
- repeat : سيتم تكرار الخلفية بشكل افتراضي في كل الصفحة .
مثال على الاستخدام:
|
1 2 3 4 5 |
body { background-image: url("explosion.gif"); background-repeat: no-repeat; } |
إقرأ أيضاً: إضافة صورة لخلفية في مقالة ووردبريس
background-position : موضع الخلفية
يمكنك تحديد المكان الذي يجب أن تكون فيه صورة الخلفية عبر الرمز background-position. هذه الخاصية لا تكون مثيرة للاهتمام إلا إذا تم دمجها مع background-repeat: no-repeat; (خلفية لا تتكرر).
يجب عليك إعطاء لموضع الخلفية قيمتين بالبكسل للإشارة إلى موضع الخلفية بالنسبة للزاوية العلوية اليسرى من الصفحة (أو الفقرة ، إذا قمت بتطبيق الخلفية على فقرة). لذلك ، إذا كتبت:
|
1 |
background-position: 30px 50px; |
ستكون خلفيتك 30 بكسل من اليسار و 50 بكسل من الأعلى. من الممكن أيضًا استخدام هذه القيم باللغة الإنجليزية:
top : إلى الأعلى ؛
bottom : إلى الأسفل.
left : إلى اليسار ؛
center : توسيط إلى المركز.
right : إلى اليمين.
من الممكن الجمع بين هذه الكلمات. على سبيل المثال ، لمحاذاة الصورة في أعلى اليمين ، ستكتب:
|
1 |
background-position: top right; |
لذلك ، إذا كنت أرغب في عرض صورة الانفجار في الخلفية (الشكل التالي) ، إذا أردتَ في نسخة واحدة تَسْتعملُ no-repeat ، إذا أردتها أن تكون مرئية دائمًا تستعمل fixed أو وضعها في أعلى اليمين نستعمل top right، فإننا نكتب :
|
1 2 3 4 5 6 7 |
body { background-image: url("explosion.gif"); background-attachment: fixed; /* الخلفية تبقى ثابتة */ background-repeat: no-repeat; /* الخلفية لن تتكرر */ background-position: top right; /* الخلفية ستكون في أعلى اليمين */ } |
إضافة الخلفية في CSS
انفجار يوضع في صورة الخلفية في أعلى اليمين
الجمع بين الخصائص
إذا كنت تستخدم الكثير من الخصائص المتعلقة بالخلفية (كما هو الحال في هذا المثال الأخير) ، يمكنك استخدام خاصية background التي يمكن أن تجمع قيمتها بين العديد من الخصائص التي تمت مشاهدتها سابقًا:
background-image ،background-repeat،
background-attachment background-position.لذلك يمكننا ببساطة كتابة:
|
1 2 3 4 |
body { background: url("explosion.gif") fixed no-repeat top right; } |
إضافة الخلفية في CSS
ما يجب معرفته لحد الآن هو أن :
- ترتيب القيم لا يهم. و يمكنك الجمع بين القِيَم في أيِّ ترتيب.
- لا يلزمك وضع جميع القيم. لذلك ، إذا كنت لا ترغب في كتابة fixed، يمكنك إزالته دون مشكلة.
عدة صور الخلفية
مـع CSS3 ، من الممكن إعطاء عدة صور خلفية لعنصر. لذلك ، يكفي فصل التصريحات بفاصلة ، مثل هذا:
|
1 2 3 4 |
body { background: url("explosion.gif") fixed no-repeat top right, url("crepuscule.jpg") fixed; } |
سيتم وضع الصورة الأولى من هذه القائمة في الترتيب الأول (الشكل التالي).
كن حذراً ، يعد ترتيب إعلان الصور أمراً مهماً: إذا عَكَسْتَ الانفجار والغروب في كود CSS السابق ، فلن ترى الافجار بعد الآن! لأن الغروب سيخفيه.
صور خلفية متعددة
لاحظ أن صور الخلفية المتعددة تعمل على جميع المتصفحات باستثناء الإصدارات القديمة من Internet Explorer ، والتي تتعرف فقط على هذه الميزة من الإصدار 9 (IE9).
إضافة الخلفية في CSS
في كل هذه الأمثلة ، قمت بتطبيق خلفية على الصفحة بأكملها . ولكن لا ينبغي أن تنسى أنه يمكنك تطبيق خلفية على أي عنصر عنوان ، فقرة ، بعض كلمات فقرة ، إلخ… أنصحك بمحاولة تطبيق خلفية على العناوين أو الفقرات. مع الجد و المثابرة سترتقي عالياً .
أتمنى لك التوفيق
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.