خاصية الخلفية Background-Property في CSS
ما طريقة ضبط تنسيق الخلفية Background لعناصر HTML في صفحة الويب..؟؟!! ما هي الخصائص التي توفرها الـ CSS لضبط الخلفية Background للعناصر صفحة الويب ….؟؟!! كيف يكون العمل مع الألوان والصور في تنسيق الخلفية Background من خلال تعليمات الـ CSS…!!
خاصية الخلفية Background Property في CSS هي أحد الخصائص الرئيسية التي تمكنك من تحسين من التصميم وجعله أكثر جاذبية وتفاعلية.و تعتبر خاصية الخلفية من أكثر الخصائص استخدامًا في CSS، حيث تتيح إمكانية تعيين صور وألوان وتأثيرات مميزة لخلفية عناصر HTML المختلفة. في هذا المقال، سنلقي نظرة على خاصية الخلفية Background في CSS وكيفية استخدامها بشكل فعال. لنبدأ…
في هذا المقال نتعرف على:
- خاصية الخلفية Background Property في CSS.
- تنسيق لون الخلفية background-color.
- تنسيق الصور كخلفية background-image .
- التدرج اللوني في الخلفية(Background-Gradient).
خاصية الخلفية Background Property في CSS
في عالم تصميم الويب، تلعب الخلفية (Background) دورًافي إضفاء الجمال والتفرد على المواقع الإلكترونية. تعد خاصية الخلفية في CSS أحد الأدوات الرئيسية التي تمكن المطورين من تخصيص العناصر وإعطائها هوية فريدة تتناسب مع رؤيتهم الفنية. توفر خاصية الخلفية العديد من الخيارات المتنوعة، بدءًا من تحديد الألوان واستخدام الصور والتدرجات، وصولًا إلى تطبيق التأثيرات المبتكرة. فيما يلي ستكتشف خاصية الخلفية (Background Property) في CSS بتفصيل أكثر.
تُستخدم خاصية الخلفية Background Property في CSS لتحديد التصميم الخلفي لعناصر HTML. يمكننا استخدامها لتعيين الألوان والصور والتأثيرات المختلفة كخلفية لعناصر الـ HTML. و تُعد خاصية الخلفية (Background Property) متعددة الوظائف، حيث يمكنك تحديد أكثر من قيمة واحدة لها وتعيينها في نفس الوقت. هناك مجموعة واسعة من القيم التي يمكنك استخدامها مع خاصية الخلفية، بما في ذلك الألوان، الصور، التدرجات، والتأثيرات الأخرى.
سواء كنا نريد تعيين لون خلفية لعنصر HTML، أو إضافة صورة تحمل رسالة معينة، أو حتى إنشاء تدرج فني فريد، فإن خاصية الخلفية Background Property في CSS تمنحنا القدرة على تحقيق ذلك بسهولة. كما تتيح لنا استخدام الألوان المختلفة تعزيز الجو العام للموقع وتوجيه الانتباه إلى العناصر المهمة. أما استخدام الصور، فيمكننا من إضافة الطابع الشخصي والإبداعي للموقع، بالإضافة إلى إيصال المعلومات والمحتوى بصورة بصرية أكثر جاذبية. ومن خلال استخدام التدرجات، يمكنك إنشاء تأثيرات بصرية مذهلة تنقل المشاهد بين ألوان متعددة بشكل سلس وجذاب.
تظهر الخلفية خلف محتوى عناصر الـ HTML .ويمكن أن تكون لكامل صفحة الويب من خلال إسناد الخلفية للعنصر الـ body و يمكن أيضاً تعيين خلفية خاصة لعنصر معين من عناصر HTML ، والخلفية قد تكون لون او صورة ثابتة أو متحركة مع حركة الماوس ويمكن تكرارها بالطول او بالعرض .فيما يلي سنرى طريقة ضبط إعدادات الـ Background Property في CSS.
تنسيق لون الخلفية background-color
تنسيق لون الخلفية دورًا في إضفاء الشخصية والجمالية على المواقع الإلكترونية.و يُعد تحديد لون الخلفية للعناصر الهامة في صفحة الويب أمرًا حيويًا لتحقيق تجربة مستخدم مرضية وإبراز المحتوى بشكل فعال. فيما يلي نستكشف تفاصيل تنسيق لون الخلفية (background-color) في CSS وكيفية استخدامها لتحقيق تأثيرات بصرية متناسقة وجميلة.
تنسيق لون الخلفية يتيح لك تحديد لون سطح الخلفية لعنصر HTML المحدد. يُمكنك استخدام أسماء الألوان المدعومة مسبقًا، أو قيم RGB، أو رموز Hexadecimal لتحديد اللون المطلوب. بتحديد لون الخلفية بشكل صحيح، يمكنك تعزيز جمالية الموقع وإتاحة تجربة مستخدم مريحة وقابلة للقراءة.
تستخدم خاصية background-color في CSS لتنسيق لون الخلفية لعناصر HTML بسهولة. يمكن تطبيقها على العناصر المختلفة مثل العناصر النصية، والعناصر القائمة، والعناصر الجدولية، والعناصر العامة، وغيرها. باستخدام القيم المناسبة، يمكنك إضفاء الطابع المناسب وإبراز أهمية العناصر في صفحتك.
لضبط لتنسيق لون الخلفية في CSS يتم بواسطة خاصية الخلفية background-color باستخدام الألوان بقيم RGB أو قيم Hexadecimal لتحديد اللون المطلوب خلفية. في المثال التالي تتضح معنا طريقة تعيين اللون لكامل الصفحة يتم تعيين اللون كخلفية للـ body :
body {background-color:rgb(122, 143, 108);}
لتكن النتيجة
في المثال التالي نرى طريقة تعيين لون الخلفية لعنصر معين من عناصر الـ HTML:
h1 { background-color: rgb(87, 147, 151);}
div { background-color: rgb(145, 124, 112);}
p { background-color: rgb(181, 207, 173);}
لتكن النتيجة
كثافة اللون Opacity Property
مع تحديد لون الخلفية في CSS يمكن أن نستخدم الخاصية opacity property لتحديد مستوى الكثافة للون الخلفية وتقبل الخاصية opacity قيم متنوعة مما يتح طُرق مختلفة لتحديد الكثافة اللونية وتتضح أنواع هذه القيم في الأمثلة التالية :
في المثال التالي سنقوم بتعيين مستوى الكثافة للعناصر صفحة الويب بواسطة الأرقام العشرية حيث يتم تعين مستوى الكثافة من 0.0 الى 0.9 حيث 0.9 الأعلى في كثافة:
div { background-color: blue;}
.div1 { opacity:0.6;}
.div2{ opacity: 0.3;}
.div3 { opacity: 0.1; }
لاحظ/ ي نتيجة المثال:
في المثال التالي سنقوم بتعيين مستوى الشفافية للخلفية العنصر فقط نستخدم نحدد قيمة opacity مع نظام الألوان RGB و بواسطة الدالة rgba () في هذه الحالة تنيم اختيار لون الخلفية بتحديد قيم الالوان الاحمر Red و الأخضر Green والأزرق Blue ومستوى الكثافة يكون للقيمة الاخيرة a كما هو موضح في المثال التالي:
div { background-color: blue;}
.div1 {background-color: rgba(0, 0, 225, 0.6);}
.div2 {background-color: rgba(0, 0, 225, 0.3);}
.div3 {background-color: rgba(0, 0, 225, 0.1);}
لاحظ/ ي نتيجة المثال:
الأمثلة لهذا الجزء متوفرة بالكامل على الرابط هنا.
من خلال تحديد لون الخلفية (background-color) المناسب، يمكننا إنشاء تجربة بصرية متناغمة و متوافقة مع هوية الموقع. كما يمكننا تنسيق لون الخلفية ليتلائم مع الألوان المستخدمة في الموقع، أو استخدامه لإبراز عنصر معين أو فصل مجموعة من العناصر عن بعضها البعض.
تنسيق الصور كخلفية background-image
إن خلفية الموقع تلعب دورًا حيويًا في إضفاء الطابع والجاذبية على المحتوى. بجانب استخدام الألوان والأشكال، توفر خاصية الخلفية background في CSS إمكانية إضافة صورة للخلفية باستخدام الخاصية background-image .
تنسيق الخلفية بصورة يتيح للمطورين والمصممين إمكانية إضافة صورة كخلفية لعناصر HTML المختلفة. يمكن استخدام صورة عالية الجودة لتعزيز تجربة المستخدم وإبراز هوية الموقع. يمكن استخدام صور الخلفية لخلق أجواء معينة، أو إضافة تفاصيل بصرية للتصميم، أو توفير تأثيرات بصرية مبتكرة.
مع خاصية background-image في CSS، يجب توفر الملف الذي يحتوي على الصورة المراد استخدامها كخلفية، وتعديل الخصائص الأخرى مثل التكرار، وتحديد موقع الصورة، وتحجيمها وتغطية العناصر الأخرى. يمكن استخدام الصور المحلية المخزنة على الخادم أو الرموز الرمزية أو روابط الصور الخارجية.
في الـ CSS يتم تنسيق الخلفية كصورة لعناصر HTML بواسطة خاصية الخلفية background-image. وعند تعين الصورة كخلفية تأخذ الخاصية background-image الـ url لمسار path للصورة المختارة. وكما في اللون يمكن تعيين صورة الخلفية لكامل المستند او لعنصر محدد وعند تعين الصورة كخلفية لكامل المستند سوف تسند للـ body اما الصورة كخلفية للعنصر معين فتسند للعنصر نفسه لاحظ/ي الأمثلة التالية:
في هذا المثال سيتم تعيين صورة كخلفية لكامل مستند الـ HTML:
body {background-image: url("background1.png");}
لتكن النتيجة
في المثال التالي سنقوم بتعيين صورة كخلفية لعنصر محدد في مستند HTML:
div{
background-image: url("background2.png");
height: 350px;
width:600px;
}
لتكن النتيجة
الأمثلة لهذا الجزء متوفرة بالكامل على الرابط هنا.
بفضل تقدم تقنيات CSS، تنسيق الصورة كخلفية لعناصر HTML المختلفة، يمكننا تعديل الخصائص المختلفة للصورة مثل تحجيمها، وتكرارها، وتحديد موقعها، وتعيين طرق تعامل الصورة مع العناصر الأخرى. باستخدام الخصائص background-repeat و background-attachment و background-position.وفيما يلي طريقة تفاصيل استخدام هذه الخصائص.
تكرار الصورة في الخلفية background-repeat
تعمل repeat مع الخاصية background -image وتتحكم في تكرار الصورة في الخلفية حيث يأخذ التكرار عدة اشكال تبعاً للقيمة التي تسند إلى background - repeat فمثلاً :
- القمتين repeat / unset وتعمل على تكرار الصورة أفقي عدة أسطر وتمثل الوضع الافتراضي.
- لقمتين repeat-x / space وتعمل على تكرار الصورة بشكل أفقي لسطر واحد.
- لقيمة repeat-y وتعمل على تكرار الصورة بشكل عمودي ولعمود واحد.
- القيمة round وتعمل على تكرار الصورة بشكل متتالي.
- القيمة no-repeat وتعمل على منع تكرار الصورة.
قم /قومي بتجربة القيم في المثال التالي على هـنا
body {background-image: url("background3.png");
/*background-repeat:unset;*/
/* background-repeat: repeat;*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/* background-repeat: space;*/
/*background-repeat: repeat-y;*/
/*background-repeat:round;*/
}
حركة الصورة في الخلفية background-attachment
تعمل background-attachment مع background- image حيث تقوم بجعل الصور الصورة ثابتة أو متحركة مع التمرير(scroll) بحسب القيمة المسندة لها حيث تأخذ القيم التالية:
- fixed حيث تكون صورة الخلفية ثابتة على الشاشة عند التمرير.
- scroll هنا تكون الصورة في الخلفية ثابتة الموقع وتختفي عند التمرير.
قم /قومي بتجربة القيم في المثال التالي على الرابط هنا
body {background-image: url("background3.png");
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
/*background-attachment:scroll;*/
}
موقع الصورة في الخلفية background-position
تتيح CSS امكانية تنسيق موقع الصورة في الخلفية بواسطة الخاصية background-position وتعمل خاصية مع background-image لتحديد موقع الصورة في الخلفية حيث تأخذ قيم تمثل موقع الصور مثل top , left, right, center ويمكن للقيم أن تكون قيم عددية حيث تأخذ أكثر من قيمة عددية لتحديد الموقع بدقة قم /قومي بتجربة القيم في المثال على الرابط هــنا
body {background-image: url("background3.png");
background-repeat: no-repeat;
/* background-position: top right;*/
/*background-position: top center;*/
background-position: 30px 30px ;
}
من خلال تنسيق الخلفية بصورة،بواسطة الخاصية background-image يمكننا إضفاء لمسة فنية على الموقع وتحقيق تأثيرات بصرية مذهلة. تعزز جمال الموقع وجذب انتباه الزوار بصورة فريدة وجذابة. فيما يلي تفاصيل أكثر حول كيفية استخدام تنسيق الخلفية بواسطة الخاصية background-image في CSS مع الأمثلة لتوضيح الاستخدام الفعال لهذه الخاصية.
التدرج اللوني في الخلفية (Background-Gradient)
يعد تنسيق الخلفية بالتدرج اللوني بواسطة الدالة (background-gradient) أداة قوية لإضفاء لمسة فنية وجمالية على صفحات الويب. فبواسطة هذا التنسيق يمكن إنشاء تدرجات لونية وانتقالات بين الألوان، مما يساهم في إضفاء جو من الحيوية والاحترافية على الموقع.
يتيح تنسيق الخلفية بالتدرج اللوني إضفاء شخصية فريدة على الموقع ويعزز جاذبيته بشكل ملحوظ. ويحقق تصميمات متقدمة وجذابة باستخدام تدرجات الألوان المختلفة، سواء كان ذلك لخلفية الصفحة بأكملها أو لعناصر محددة داخلها.
في هذا الجزء من المقال، سنستكشف تفاصيل تنسيق الخلفية بالتدرج اللوني (background-gradient) في CSS.ونقدم أمثلة وتطبيقات عملية لإظهار كيفية استخدام هذه الخاصية بشكل فعال. ستتعلم كيفية تحديد الألوان وتعيين النقاط الرئيسية وتعديل الخصائص لإنشاء تدرجات لونية رائعة تضفي جمالًا وتأثيرًا استثنائيًا على موقعك.
أشكال التدرج اللوني في الخلفية Background-Gradient
توفر الـ CSS امكانية إنشاء خلفيات متدرجة الألوان باستخدام الدالة Background-Gradient مع الخاصية background-image لتكون الإنتقالات بين ألوان متعددة،. وتأخذ هذه الإنتقالات شكل من أشكال التدرجات اللونية حيث تتوفر ثلاثة أشكال وهي كالآتي :
- التدرجات الخطية Linear Gradients.
- التدرجات الإشعاعية Radial Gradients.
- التدرجات المخروطية Conic Gradients.
فيما يلي تفصيل لطريقة تكوني التدرج اللوني بواسطة كل شكل من الأشكال الثلاثة :
التدرجات الخطية Linear Gradients
يأخذ التدرج الخطي مسار باتجاه واحد. حيث تأخذ اتجاهات التدرج الى أعلى وأسفل أو لليمين او اليسار او قطرياًًً (goes down/up/left/right/diagonally). ولإنشاء تدرج خطي Linear Gradients، يجب علينا تحديد لونين على الأقل. للألوان التي تريد عرض انتقالات بينها. يمكننا أيضًا تعيين نقطة بداية واتجاه (أو زاوية) بالإضافة إلى تأثير التدرج. لاحظ /ي اتجاهات التدرج الخطي Linear Gradient فيما يلي طبعاً الإتجاه من أعلى إلى أسفل هو الاتجاه الإفتراضي :
...........
#box1{ background-image: linear-gradient(#aed8d0, #888888);} /*to up*/
#box2{ background-image: linear-gradient(to bottom left, #aed8d0, #888888); } /*Diagonal Direction */
#box3{ background-image: linear-gradient(to right, #aed8d0, #888888); } /*from left to rightt*/
#box4{ background-image: linear-gradient(to left, #aed8d0, #888888); } /*form right to left */
...........
ولتكون نتيجة المثال كتالي:
وفي حال كنا نريد المزيد من التحكم في اتجاه التدرج، يمكننا تحديد زاوية، بدلاً من الاتجاهات المحددة مسبقًا (to bottom, to top, to right, to left, to bottom right, etc.). قيمة 0 deg تعادل إلى الأعلى (to top). قيمة 90 درجة تعادل إلى اليمين(to right). قيمة 180 درجة تعادل إلى الأسفل ( to bottom). لتكتب كما في المثال التالي:
...........
#box1{ background-image: linear-gradient( 0deg, #aed8d0, #888888);}
#box2{ background-image: linear-gradient(180deg, #aed8d0, #888888); }
#box3{ background-image: linear-gradient(90deg, #aed8d0, #888888);}
#box4{ background-image: linear-gradient(270deg, #aed8d0, #888888);}
...........
ولتكون نتيجة المثال كتالي:
الأمثلة لهذا الجزء متوفرة بالكامل على الرابط هنا.
التدرجات الإشعاعية Radial Gradients
يتم تعريف التدرج الشعاعي (Radial-gradient) من خلال مركزه. حيث ينطلق التدرج من نقطة مركزية وينتشر حولها. افتراضيًا، يكون الشكل بيضاوي والحجم هو الزاوية الأبعد، والموضع هو المنتصف.و لإنشاء تدرج لوني إشعاعي، يجب علينا تحديد لونين على الأقل. ويوضح المثال التالي الفرق في شكل التدرج مع وقفات لونية متباعدة ووقفات لونية متساوية وكيفية تحديد نسبة التباعد بين الألوان في التدرج:
...........
#box1{ background-image: radial-gradient( #aed8d0, #888888, #000000); }
#box2{background-image: radial-gradient(#aed8d0 10%, #888888 30%, #000000 60%); }
...........
لاحظ /ي نتيجة المثال:
الشكل الإفتراضي مع خليفة التدرج الشعاعي بيضاوي و يمكن تغير الشكل شكل الى دائري بتحديد شكل الدائرة له كما يتضح معنا في المثال التالي:
...........
#box1{ background-image: radial-gradient( #aed8d0, #888888, #000000); }
#box2{ background-image: radial-gradient(circle, #aed8d0, #888888, #000000); }
...........
لاحظ نتيجة المثال .
أيضاً من خيارات التدرج الإشعاعي التحكم بالحجم وتأخذ القيم التالية:
- الجانب الأقرب closest-side.
- الجانب الأبعد farthest-side.
- الزاوية الأقرب closest-corner.
- الزاوية الأبعد farthest-corner.
والتي تستخدم كما يتضح في المثال التالي :
...........
#box1{background-image: radial-gradient( closest-side at 70% 40% , #aed8d0, #888888, #000000); }
#box2{background-image: radial-gradient( closest-corner at 70% 40% , #aed8d0, #888888, #000000); }
#box3{background-image: radial-gradient( farthest-side at 70% 40% , #aed8d0, #888888, #000000); }
#box4{background-image: radial-gradient(farthest-corner at 70% 40% , #aed8d0, #888888, #000000); }
...........
لاحظ/ي النتائج للمثال:
الأمثلة لهذا الجزء متوفرة بالكامل على الرابط هنا.
التدرجات المخروطية Conic Gradients
التدرج المخروطي هو تدرج مع انتقالات لونية تدور حول نقطة مركزية. و لإنشاء تدرج مخروطي يجب تحديد لونين على الأقل. مع إعطاء قيم الألوان للـ ()conic-gradient ، درجة الزاوية المركزية التدرج المخروطي الافتراضية هي 0 . وعند عدم تحديد أي درجة، فسيتم توزيع الألوان بالتساوي حول النقطة المركزية.ويمكن تعديل زاوية التدرج للتحكم في الألوان كما في box2 في المثال التالي:
...........
#box1{background-image: conic-gradient( #aed8d0, #888888, #000000); }
#box2{background-image: conic-gradient( #aed8d0 45deg, #888888 90deg, #000000 200deg); }
...........
لتكون النتيجة كالتالي:
يمكن ايضاً مع التدرج المخروطي إنشاء المخطط الدائري Pie Chart وهذا مع استخدام الخاصية border-radius ، مع التدرج المخروطي كما في المثال التالي:
...........
#box1{background-image: conic-gradient( #aed8d0, #888888 , #000000);
border-radius: 50%;}
#box2{background-image:conic-gradient( #aed8d0 45deg, #888888 90deg, #000000 200deg);
border-radius: 50%; }
...........
لتكون النتيجة للمثال كتالي:
كما يمكن تعديل مكان الزاوية المركزية للتدرج المخروطي بتحديد موقع معين التدرج، كما في المثال التالي:
...........
#box1{background-image: conic-gradient(at 60% 45%, #aed8d0, #888888 , #000000);
border-radius: 50%;}
...........
فتكون النتيجة كتالي:.
الأمثلة لهذا الجزء متوفرة بالكامل على الرابط هنا
التكرار(repeating) مع التدرج اللوني
مع أشكال التدرج المختلفة يمكن عمل تكرار للتدرج اللوني ويكون بإضافة repeating لتكوين دالة تكرار لأي نوع من التدرجات اللونية سواء الخطي أو الشعاعي او المخروطي كتالي:
- الدالة repeating-linear-gradient() للتكرار التدرج الخطي.
- الدالة repeating-radial-gradient() للتكرار التدرج الإشعاعي
- الدالة repeating-conic-gradient() للتكرار التدرج المخروطي .
ولابد من إعطاء دالة التكرار الخاصة بالتدرج المراد عمل التكرارله تركيز الألوان لكل لون أو المساحة لكل لون كما يوضح المثال التالي:
...........
#box1{background-image: repeating-conic-gradient( #aed8d0 10%, #888888 20%, #000000 30% );
border-radius: 50%;}
#box2{background-image: repeating-conic-gradient( #aed8d0 0deg 20deg, #888888 20deg 40deg, #000000 40deg 60deg);
border-radius: 50%;}
...........
ولتكون نتيجة المثال كتالي:
المثال متوفر بالكامل على الرابط هنا
إن استخدام تنسيق الخلفية بالتدرج اللوني يحقق تأثيرات بصرية مذهلة. ويتم عمل تنسيق التدرج اللوني بتعيين لون أو أكثر ثم يقوم النظام بإنشاء تدرج لوني. مع التدرج اللوني يمكن تحديد الاتجاه والزاوية والألوان والتعديلات الأخرى للتحكم في المظهر النهائي للتدرج.
خاصية الخلفية (Background) في CSS توفر العديد من الخيارات لتحسين تصميم الموقع وجعله أكثر جاذبية وتفاعلية.رأينا كيف يمكن استخدام الألوان والصور والتدرجات لإنشاء تصميم فريد. في الختام، توفر خاصية الخلفية Background في CSS مجموعة واسعة من الخيارات لتحسين تصميم موقع الويب الخاص بك عن طريق ضبط الألوان والصور والتدرجات وتطبيق التأثيرات المتنوعة.