5- خلفيات CSS

5- خلفيات CSS

تُستخدم خصائص خلفيات CSS لإضافة تأثيرات الخلفية للعناصر. في هذه الفصول ، ستتعرف على خصائص خلفية CSS التالية:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background (خاصية الاختزال)

لون الخلفية background-color

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

مثال

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

body {
  background-color: lightblue;
}

باستخدام CSS ، يتم تحديد اللون غالبًا بواسطة:

  • اسم لون صالح – مثل “أحمر”
  • قيمة HEX – مثل “# ff0000”
  • قيمة RGB – مثل “rgb (255،0،0)”

انظر إلى CSS Color Values للحصول على قائمة كاملة بقيم الألوان الممكنة.


عناصر أخرى

يمكنك ضبط لون الخلفية لأي من عناصر HTML:

مثال

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

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

العتامة / الشفافية opacity

تحدد الخاصية التعتيم / الشفافية عنصر. يمكن أن تأخذ قيمة من 0.0 إلى 1.0. كلما قلت القيمة ، زادت شفافية:

div {
  background-color: green;
  opacity: 0.3;
}

صورة خلفية  background-image

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

بشكل افتراضي ، تتكرر الصورة بحيث تغطي العنصر بأكمله.

مثال

قم بتعيين صورة الخلفية للصفحة: 

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

مثال

يُظهر هذا المثال مزيجًا سيئًا من النص وصورة الخلفية. النص يصعب قراءته:

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

تكرار خلفية  background-image

بشكل افتراضي ، background-image تكرر الخاصية الصورة أفقيًا وعموديًا.

بعض الصور يجب أن تتكرر أفقيًا أو رأسيًا فقط ، وإلا ستبدو غريبة ، كالتالي:

مثال

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

تكرار الخلفية no-repeat -عدم التكرار

يتم تحديد عرض صورة الخلفية مرة واحدة فقط بواسطة background-repeatالخاصية:

مثال

أظهر صورة الخلفية مرة واحدة فقط:

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

مرفق خلفية  attachment

مثال

حدد أنه يجب إصلاح صورة الخلفية

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