خلفية CSS (الخلفية)

تستخدم خصائص الخلفية في css لتحديد أنماط الخلفية للعناصر. تشير css الخلفية هنا إلى تعيين خصائص الخلفية للأجسام باستخدام css، مثل تعيين أنماط الخلفية المختلفة.

خصائص الخلفية

يقدم css عدة خصائص للخلفية لعدد من العناصر، مثل:background-color،background-image،background-repeat،background-attachmentوbackground-positionفي المقطع التالي، سيتم شرح كيفية استخدام هذه الخصائص لتحديد أنماط الخلفية المختلفة.

لون الخلفية

background-colorيستخدم لتحديد لون الخلفية للعنصر.

يوضح المثال التالي كيفية إعداد لون الخلفية للصفحة.

body {background-color: #f0e68c;}

يتم تحديد الألوان في css عادةً بالطرق التالية:

• قيمة سداسية-مثل "#ff0000"

• قيمة RGB-مثل "rgb(255,0,0)"

• أسماء الألوان-مثل "الأحمر"

انظرأسماء الألوان cssللحصول على قائمة كاملة بأسماء الألوان المحتملة.

صورة الخلفية

background-imageيضيف الصورة كخلفية للعنصر html.

يرجى الرجوع إلى المثال التالي، الذي يوضح كيفية إعداد صورة الخلفية للصفحة.

body {background-image: url("leaf.jpg");}

تكرار الخلفية

بالتجربة،background-imageيكرر الصورة في الاتجاهين العمودي والأفقي.

من خلال استخدامbackground-repeatيستطيع التحكم في كيفية تكرار الصورة الخلفية في خلفية عنصر html. يمكنك تعيين تكرار عمودي (y-الخط)، أفقي (x-الخط)، ثنائي الاتجاه أو تكرار ثنائي الاتجاه.

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

body　{
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

إلصاق الخلفية

background-attachmentيحدد إذا كانت صورة الخلفية ثابتة بالنسبة للنافذة أو تتحرك مع العنصر المحتوي.

body　{
　　　　width: 250px;
　　　　height: 200px;
　　　　overflow: scroll;
　　　　background-image: url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

موقع الخلفية

background-positionيستخدم لتحكم في موقع صورة الخلفية.

إذا لم يكنbackground-positionإذا لم يتم تحديد، فإن الصورة ستوضع في موقع الافتراضي للعنصر، وهو(0,0)يرجى الرجوع إلى المثال التالي:

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

في المثال التالي، يتم وضع صورة الخلفية في الزاوية العلوية اليمنى، ويتم تحديد موقع الصورة من قبلbackground-positionالخصائص المحددة.

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

خصائص الخلفية الاختصارية

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

منbackgroundخصائص هي تستخدم لضبط جميع الخاصيات الفردية للخلفية (أي، الخاصيات المختصرة)background-color،background-image،background-repeat،background-attachmentوbackground-position()) في مرة واحدة. على سبيل المثال:

body　{
　　　　background-color:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

باستخدام الرمز التوجيهي، يمكن كتابة المثال السابق كالتالي:

body　{background:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

استخدامbackgroundعند استخدام خاصية اختصار الخلفية، يجب أن تكون ترتيب قيم الخاصية كالتالي.

الخلفية:الألوان الصورة الإعادة الإرتباط الموقع ;

إذا تم استخدام الرمز التوجيهي عند فقدان أو عدم تحديد قيمة الخاصية الفردية للخلفية، فإن القيمة الافتراضية للخاصية ستستخدم (إذا كانت موجودة).