أنواع الخلفيات في CSS | أساسيات CSS


CSS الخلفيات و الالوان


تُستخدم سمات الخلفية في CSS لتحديد تأثيرات الخلفية لعناصر HTML. في هذا الدرس، سنلقي نظرة على أنواع الخلفيات في CSS. 

انواع background

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

صفة لون الخلفية

تحدد سمة لون الخلفية لون خلفية العنصر. يتم تعيين لون خلفية العنصر على النحو التالي:

body {
background-color: lightblue;
}

في CSS، غالبًا ما يتم تحديد اللون على النحو التالي:
اسم للون - مثل "أحمر"
قيمة سداسية عشرية - مثل "ff0000 #"
قيمة RGB - مثل "(rgb (255،0،0")

في المثال التالي، لكل من العناصر <p> و <h1> و <div> لون خلفية مختلف:

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

سمة صورة الخلفية

تحدد خاصية background-image الصورة على أنها صورة الخلفية لعنصر ما. بشكل افتراضي، سيتم تكرار الصورة حتى تغطي المساحة الكاملة للعنصر.

يتم تعيين سمة صورة الخلفية للصفحة على النحو التالي:

body {
background-image: url("paper.gif");
}

المثال أعلاه هو مثال سيء على مزيج من النص وصورة الخلفية. في هذا المثال يصعب قراءة النص:

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

صورة الخلفية - تكرر أفقيًا وعموديًا


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

body {
background-image: url("gradient_bg.png");
}

إذا تم تكرار الصورة أعلاه أفقيًا فقط (؛ تكرار الخلفية: تكرار- x)، ستبدو صورة الخلفية أفضل:

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

صورة الخلفية - ضبط الموضع وسمات عدم التكرار

يتم عرض صورة الخلفية مرة واحدة فقط وبدون تكرار في اتجاهات أفقية ورأسية، مع خاصية تكرار الخلفية:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

في المثال أعلاه، توجد صورة الخلفية في نفس مكان النص. نريد تغيير موقع الصورة حتى لا تتضرر لسهولة قراءة النص.

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


body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

صورة الخلفية - الموقع الثابت للصورة

تُستخدم سمة مرفق الخلفية للحفاظ على صورة الخلفية ثابتة وليس التمرير أثناء استمرار الصفحة.

يتم تحديد كيفية استخدام هذه السمة في مثال التعليمات البرمجية التالي:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

الخلفية - صفة مختصرة

بالنسبة للاختصار في الكود، من الممكن تضمين جميع سمات الخلفية في سمة واحدة، والتي تسمى سمة الاختزال. يوضح المثال التالي كيفية استخدام السمة المختصرة لسمات الخلفية:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

عندما نستخدم السمة المختصرة للخلفية، يكون ترتيب قيم السمة كما يلي:


  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position


يمكنك تجاهل أي من قيم البيانات الجدولية في سمة الخلفية المختصرة طالما أن الأولوية لا تزال محفوظة في القيم الأخرى.



كلمات مفتاحية: