خصائص القصيرة لـ CSS الخلفية

خصائص القصيرة لـ CSS background

إذا كنت ترغب في تقليل الكود، يمكنك تحديد جميع خصائص الخلفية في سمة واحدة. وتسمى هذه الخاصية القصيرة.

بدلاً من ذلك:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

يمكنك استخدام خصائص القصيرة background:

مثال

استخدام خصائص القصيرة لضبط خصائص الخلفية في بيانات واحدة:

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

تجربة شخصية

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

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

إذا كان هناك نقص في قيمة أحد القيم فلا يهم، فقط قم بتعيين البقية وفقًا لهذا الترتيب. يرجى ملاحظة أننا لم نستخدم خصائص background-attachment في المثال السابق لأنها ليس لها قيمة.

جميع خصائص الخلفية لـ CSS

خصائص وصف
background إعداد جميع خصائص الخلفية في بيانات قصيرة واحدة.
background-attachment تحديد ما إذا كانت صورة الخلفية ثابتة أم تتحرك مع باقي الصفحة.
background-clip تحديد منطقة رسم الخلفية.
background-color تعيين لون الخلفية للعنصر.
background-image تعيين صورة الخلفية للعنصر.
background-origin تحديد مكان وضع صورة الخلفية.
background-position تحديد موقع البداية للصورة الخلفية.
background-repeat تحديد ما إذا كانت الصورة الخلفية تعيد التكرار وكيفية تكرارها.
background-size تحديد حجم الصورة الخلفية.