شرح خاصية background-image مع استخدام عدة صور خلفية

ما هي خاصية background-image؟

خاصية background-image في CSS تُستخدم لإضافة صورة خلفية لعنصر معين في صفحة الويب. يمكنك استخدام صورة واحدة أو عدة صور كخلفية.

تركيب الخاصية

الصيغة العامة لاستخدام background-image هي:

background-image: url('مسار_الصورة_الأولى'), url('مسار_الصورة_الثانية');

• url(): تُستخدم لتحديد مسار الصورة.
• الفاصلة (,): تُستخدم لفصل بين عدة صور إذا كنت تريد إضافة أكثر من صورة خلفية.

كيف تعمل خاصية background-image مع عدة صور؟

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

1. الصورة الأولى تكون في المقدمة (أعلى الطبقات).
2. الصورة الثانية تكون خلف الصورة الأولى (تحتها).
3. يمكن إضافة أي عدد من الصور، حيث تكون الصورة الأخيرة في القائمة هي الأبعد (الخلفية النهائية).

أمثلة على استخدام background-image مع عدة صور

(1) صورة خلفية واحدة:

.element {
    background-image: url('image1.jpg');
}

(2) صورتان خلفيتان:

.element {
    background-image: url('image1.png'), url('image2.jpg');
}

هنا image1.png ستظهر فوق image2.jpg.

(3) ثلاث صور خلفية:

.element {
    background-image: url('image1.png'), url('image2.jpg'), url('image3.jpg');
}

الترتيب: image1.png (أعلى)، ثم image2.jpg، ثم image3.jpg (أبعد).

خصائص إضافية للتحكم في الصور الخلفية

عند استخدام عدة صور خلفية، يمكنك استخدام الخصائص التالية للتحكم في كيفية عرضها:

• background-position: لتحديد موضع كل صورة خلفية.

  background-position: center top, right bottom;

• background-size: لتحديد حجم كل صورة خلفية.

  background-size: cover, contain;

• background-repeat: لتحديد ما إذا كانت الصورة ستتكرر أم لا.

  background-repeat: no-repeat, repeat-x;

• background-clip: لتحديد كيفية اقتصاص الصورة.

  background-clip: padding-box, border-box;

• background-origin: لتحديد نقطة بداية الصورة.

  background-origin: content-box, padding-box;

مثال شامل

.element {
    background-image: url('image1.png'), url('image2.jpg');
    background-position: center top, right bottom;
    background-size: cover, contain;
    background-repeat: no-repeat, repeat-x;
}

تفسير المثال:

• الصورة الأولى (image1.png):
  • ستظهر في وسط الجزء العلوي من العنصر.
  • سيتم تغطية العنصر بالكامل (cover).
  • لن تتكرر (no-repeat).
• الصورة الثانية (image2.jpg):
  • ستظهر في الجزء السفلي الأيمن من العنصر.
  • سيتم احتواء الصورة داخل العنصر (contain).
  • ستتكرر أفقيًا (repeat-x).

فوائد استخدام عدة صور خلفية

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

نصائح عند استخدام background-image

• تحسين حجم الصور: تأكد من تحسين حجم الصور لتحسين أداء الموقع.
• استخدام تنسيقات مناسبة: استخدم تنسيقات مثل WebP أو SVG للصور البسيطة.
• اختبار التوافق: تأكد من أن الصور تعمل بشكل جيد على جميع المتصفحات.

مثال عملي

لنفترض أنك تريد إنشاء خلفية لعنصر تحتوي على:

• صورة شعار في الأعلى.
• صورة خلفية متكررة في الأسفل.

.element {
    background-image: url('logo.png'), url('background-pattern.jpg');
    background-position: center top, left top;
    background-size: auto, auto;
    background-repeat: no-repeat, repeat;
}

الخلاصة

خاصية background-image مع استخدام عدة صور (url(), url()) تمنحك مرونة كبيرة في تصميم الخلفيات لعناصر موقعك. بفهمك للخصائص الإضافية مثل background-position وbackground-size، يمكنك إنشاء تصاميم متقدمة وجذابة.

معاينة

كيف كان المقال؟