خلفيات CSS

خصائص الخلفية CSS تستخدم لتحديد تأثير الخلفية للعنصر.

في هذه الفصول، ستتعلم عن خصائص الخلفية CSS التالية:

  • لون الخلفية
  • صورة الخلفية
  • تكرار الخلفية
  • إلصاق الخلفية
  • وضع الخلفية

CSS لون الخلفية

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

مثال

إعداد لون الخلفية للصفحة كالتالي:

body {
  لون الخلفية: lightblue;
}

تجربة بنفسك

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

  • أسماء الألوان الصالحة - مثل "red"
  • قيم عشري - مثل "#ff0000"
  • قيم RGB - مثل "rgb(255,0,0)"

الرجاء الرجوع إلى قيم الألوان CSS، للحصول على قائمة كاملة من القيم المرشحة للألوان.

العناصر الأخرى

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

مثال

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

h1 {
  لون الخلفية: green;
}
div {
  لون الخلفية: lightblue;
}
p {
  لون الخلفية: yellow;
}

تجربة بنفسك

شفافية / شفافية

تحدد خاصية الشفافية شفافية/شفافية العنصر. نطاق القيم هو 0.0 - 1.0. القيمة الأدنى، الشفافية أعلى:

شفافية 1
شفافية 0.6
شفافية 0.3
شفافية 0.1

مثال

div {
  لون الخلفية: green;
  شفافية: 0.3;
}

تجربة بنفسك

ملاحظة:استخدم شفافية عندما يتم تعيين شفافية الخلفية للعنصر، تنقلق جميع العناصر الفرعية نفس الشفافية. قد يجعل النص داخل العناصر الشفافة صعب القراءة.

شفافية RGBA

إذا كنت لا ترغب في تطبيق الشفافية على العناصر الفرعية، مثل المثال السابق، استخدم: RGBA قيمة اللون. على سبيل المثال، يُحدد هذا الإعداد لون الخلفية وليس شفافية النص:

100% الشفافية
60% الشفافية
30% شفافية
10% شفافية

من خلال ألوان CSS تعلمت في هذا الفصل كيفية استخدام RGB كقيمة اللون. بالإضافة إلى RGB، يمكنك أيضًا استخدام قيمة RGB كقيمة اللون مع الألفا استخدام القنوات معًا (RGBA) - يحدد هذا القناة شفافية اللون.

قيمة الألوان RGBA معروفة كالتالي: rgba(أحمر, أخضر, أزرق, الألفا)。الألفا الم参数 هي أرقام بين 0.0 (شفاف تمامًا) و 1.0 (غير شفاف تمامًا).

نصيحة:يمكنك العثور على ألوان CSS تعلمت في هذا الفصل المزيد عن ألوان RGBA.

مثال

div {
  background: rgba(0, 128, 0, 0.3) /* خلفية زرقاء شفافة بنسبة 30% */
}

تجربة بنفسك