الخلفيات Background

تحديد خصائص الخلفية

تلعب الخلفية دورًا مهمًا في العرض المرئي لصفحة الويب.
توفر CSS العديد من الخصائص لتصميم خلفية عنصر ما ، بما في ذلك تلوين الخلفية ووضع الصور في الخلفية وإدارة مواقعها ، إلخ.
خصائص الخلفية هي background-color و background-image و background-repeat و background-attachment إضافة إلى background-position.
في هذا الدرس سوف سنناقش كل من هذه الخصائص بمزيد من التفصيل.

لون الخلفية Background Color

يتم استخدام الخاصية background-color لتعيين لون خلفية عنصر.
يوضح المثال التالي كيفية تعيين لون الخلفية للصفحة بأكملها.

مثال
تشغيل
  1. body {
  2. background-color: #f0e68c;
  3. }

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

  • بإستخدام اسم اللون color name مثلا red
  • بإستخدام قيمة اللون بالنظام السادس عشر HEX مثلا #ff0000
  • بإستخدام نظام RGB للألوان مثلا rgb(255, 0, 0)

لمعرفة المزيد حول تحديد قيم الألوان والتعامل معها يرجى مراجعة درس الألوان Colors

صورة الخلفية Background Image

تقوم الخاصية background-image بتعيين صورة كخلفية لعنصر HTML.
يوضح المثال التالي كيفية تعيين صورة الخلفية للصفحة بأكملها.

مثال
تشغيل
  1. body {
  2. background-image: url("images/tile.png");
  3. }
ملاحظة:

عند تطبيق صورة الخلفية على عنصر ، تأكد من أن الصورة التي تختارها لا تؤثر على إمكانية قراءة محتوى نص العنصر.

نصيحة:

بشكل افتراضي ، يكرر المتصفح صورة الخلفية أفقيًا وعموديًا لملء مساحة العنصر بالكامل. يمكنك التحكم في ذلك باستخدام الخاصية background-repeat.

تكرار صورة الخلفية Background Repeat

تتيح لنا الخاصية background-repeat التحكم في كيفية تكرار صورة الخلفية في خلفية عنصر.
يمكننا تعيين صورة خلفية للتكرار رأسيًا (على محور ص) (y-axis) أو أفقيًا (على محور س)(x-axis) في كلا الاتجاهين أو في أي من الاتجاهين.
يوضح المثال التالي كيفية تكرار الصورة أفقيًا على طول المحور س (x-axis)

مثال
تشغيل
  1. body {
  2. background-image: url("images/tile.png");
  3. background-repeat: repeat-x;
  4. }

وبالمثل ، يمكنك استخدام القيمة repeat-y لتكرار صورة الخلفية رأسيًا على طول المحور ص y-axis ، أو القيمة no-repeat لمنع التكرار تمامًا.

مثال
تشغيل
  1. body {
  2. background-image: url("images/tile.png");
  3. background-repeat: no-repeat;
  4. }

دعونا نلقي نظرة على الرسم التوضيحي التالي لفهم كيفية عمل هذه الخاصية.

background-repeat

موقع الخلفية Background Position

يتم استخدام الخاصية background-position للتحكم في موقع صورة الخلفية.
إذا لم يتم تحديد موقع الخلفية ، يتم وضع صورة الخلفية في الموقع الافتراضي أعلى اليسارtop-left للعنصر ، دعنا نجرب المثال التالي:

مثال
تشغيل
  1. body {
  2. background-image: url("images/robot.png");;
  3. background-repeat: no-repeat;
  4. }

في المثال التالي ، سيتم وضع صورة الخلفية في الزاوية العلوية اليمنى top-right.

مثال
تشغيل
  1. body {
  2. background-image: url("images/robot.png");;
  3. background-repeat: no-repeat;
  4. background-position: right top;
  5. }
ملاحظة:

إذا تم تحديد قيمتين للخاصية background-position ، فإن القيمة الأولى تمثل الموقع الأفقي horizontal ، والثانية تمثل الموقع الرأسي vertical . إذا تم تحديد قيمة واحدة فقط ، فسيتم افتراض أن القيمة الثانية هي center.

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

background-position

موضع الخلفية Background Attachment

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

مثال
تشغيل
  1. body {
  2. background-image: url("images/robot.png");;
  3. background-repeat: no-repeat;
  4. background-attachment: fixed;
  5. }

الإختصار shorthand property في الخاصية Background

كما رأينا في الأمثلة أعلاه ، هناك العديد من الخصائص التي يجب مراعاتها عند التعامل مع الخلفيات. ومع ذلك ، من الممكن أيضًا تحديد جميع هذه الخصائص في خاصية واحدة لإختصار الكود أو تجنب الكتابة الإضافية. هذا يسمى shorthand property
الخاصية background هي خاصية مختصرة لإعداد جميع خصائص الخلفية ، background-color و background-image و background-repeat و background-attachment و background-position.
ولفهم كيفية عملها لنجرب المثال التالي :

مثال
تشغيل
  1. body {
  2. background-color: #f0e68c;;
  3. background-image: url("images/smiley.png");
  4. background-repeat: no-repeat;
  5. background-attachment: fixed;
  6. background-position: 250px 25px;
  7. }

باستخدام الخاصية المختصرة background ، يمكن كتابة المثال أعلاه على النحو التالي:

مثال
تشغيل
  1. body {
  2. background: #f0e68c url("images/smiley.png") no-repeat fixed 250px 25px;
  3. }

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

بناء الجملة
  1. background: color image repeat attachment position;

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

« التالي السابق »