سيوضح دليل الدراسة هذا كيفية استخدام صور الخلفية مع CSS. لذا ، فلنبدأ!
كيفية استخدام صور خلفية متعددة باستخدام CSS؟
CSS ' خلفية 'هي خاصية اختصار تحتوي على خصائص الخلفية ، وإرفاق الخلفية ، والمقطع ، والصورة ، والتكرار ، والأصل ، والحجم ، والموضع. يمكن استخدام خاصية الخلفية لتحديد عناوين URL لصور متعددة. ثم يتم وضع هذه الصور وتعيينها وفقًا لذلك.
لنأخذ مثالاً حيث يحتوي عنصر div على صورة واحدة فقط كشعار لصفحة الويب بينما يحتوي العنصر الثاني على ثلاث صور.
مثال: إضافة صور خلفية متعددة باستخدام CSS
في HTML ، أضف عنصر div للشعار وحدد اسم الفئة. على سبيل المثال ، أطلقنا عليها اسم ' شعار '. تستخدم div الثانية صورًا متعددة ، لذلك أطلقنا عليها اسم ' صور متعددة '. ومع ذلك ، يمكنك تحديد اسم الفصل حسب تفضيلاتك.
لغة البرمجة
< شعبة فصل = 'شعار' > < / شعبة >< شعبة فصل = 'صور متعددة' > < / شعبة >
في القسم التالي ، سنقوم بتعديل الصور باستخدام خاصية CSS background.
نمط 'الشعار' div
.شعار {عرض : 100٪ ؛
ارتفاع : 50 بكسل ؛
حشوة : 5 بكسل ؛
هامِش : 5 بكسل ؛
حجم الخلفية : 100 بكسل ؛
تكرار الخلفية : لا تكرار ؛
الصورة الخلفية : عنوان url ( images / linux-logo.png ) ؛
}
عنصر div مع الفئة ' شعار 'بالخصائص التالية:
- ' عرض 'لتعيين عرض العنصر على' 100٪ '.
- ' ارتفاع 'لتعيين ارتفاع العنصر على' 50 بكسل '.
- ' حشوة 'لتعيين' 5 بكسل 'مسافة حول المحتوى المحدد للعنصر.
- ' هامِش 'لتعيين' 5 بكسل 'مسافة حول العنصر.
- ' حجم الخلفية 'تعيّن حجم صورة خلفية العنصر على أنه' 100 بكسل '.
- ' تكرار الخلفية 'بالقيمة' لا تكرار 'الخلفية مرة واحدة فقط.
- ' الصورة الخلفية 'لتحديد عنوان URL للصورة.
نمط 'صور متعددة' div
.صور متعددة {عرض : 90٪ ؛
ارتفاع : 45vh ؛
هامِش : 1 بكسل آلي ؛
حشوة : 20 بكسل ؛
حجم الخلفية : 150 بكسل ؛
لون الخلفية : RGB ( 157 و 154 و 151 ) ؛
الصورة الخلفية : عنوان url ( images / office.png ) و عنوان url ( الصور / html.png ) و عنوان url ( images / laptop.png ) ؛
تكرار الخلفية : لا تكرار و لا تكرار و لا تكرار ؛
خلفية الموقف : غادر و مركز و يمين ؛
}
الآن ، قم بتصميم الحاوية الأخرى على النحو التالي:
- ' لون الخلفية 'لون خلفية العنصر.
- ' الصورة الخلفية ”تحدد عناوين URL متعددة للصور.
- ' تكرار الخلفية 'تعيّن الخاصية قيمًا للصور في تسلسل للصور المحددة في خاصية صورة الخلفية. تم تعيين كلتا الصورتين على أنهما غير مكررين ، مما يعني أنهما سيظهران على المتصفح مرة واحدة فقط.
- ' خلفية الموقف 'يضبط موضع الصورة في تسلسل الصور المحدد بواسطة خاصية صورة الخلفية. سيتم تعيين الصورة الأولى على الجانب الأيسر ، وسيتم وضع الصورة الثانية في المنتصف والصورة الثالثة على الجانب الأيمن.
من خلال توفير الكود المذكور أعلاه ، ستبدو النتيجة في المتصفح كما يلي:
بهذه الطريقة ، يمكننا ضبط موضع عدة صور باستخدام CSS.
خاتمة
لجعل التطبيق مسليًا وتفاعليًا ، يستخدم المطورون صورًا وألوانًا مختلفة. يمكننا تعيين صور متعددة بخصائص خلفية CSS ، مثل وضع الخلفية وتكرار الخلفية وحجم الخلفية والمزيد. أظهر هذا الدليل استخدام صور خلفية متعددة مع أمثلة CSS.