أثناء عملية تطوير الواجهة الأمامية، غالبًا ما تتم إضافة صور الخلفية إلى صفحات HTML من أجل جمال الصفحة. فكيف تستخدم CSS لتعيين صورة كخلفية في HTML؟ ستقدم لك هذه المقالة كيفية تعيين صورة خلفية في CSS، ويمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها والتعرف عليها، وآمل أن تكون مفيدة لك.
1. نظرة عامة على الخلفية
يمكن لـ CSS إضافة ألوان الخلفية وصور الخلفية، بالإضافة إلى إعدادات الصورة.
سمة خلفية CSS هي خاصية تحدد الخلفية على وجه التحديد، يمكنك تعيين لون الخلفية أو صورة الخلفية.
2. السمات
1. لون الخلفية
(1) التعريف والاستخدام: تحدد سمة لون الخلفية لون خلفية العنصر
(2) نطاق خلفية العنصر
تقوم خاصية لون الخلفية بتعيين لون خالص للعنصر. يملأ هذا اللون محتوى العنصر والحشوة ومناطق الحدود، ويمتد إلى الحدود الخارجية لحد العنصر (ولكن ليس الهوامش). إذا كانت الحدود تحتوي على أجزاء شفافة (مثل الحدود المنقطة)، فسيظهر لون الخلفية من خلال هذه الأجزاء الشفافة.
(3) قيمة شفافة
على الرغم من أن استخدام الشفافية ليس ضروريًا في معظم الحالات. ومع ذلك، إذا كنت لا تريد أن يكون للعنصر لون خلفية، ولا تريد أن تؤثر إعدادات ألوان متصفح المستخدم على تصميمك، فإن تعيين القيمة الشفافة لا يزال ضروريًا.
استخدم لون الخلفية لتعيين لون الخلفية لعنصر ما:
<!DOCTYPEhtml><html><head><title>خلفية CSS</title><style>#bg{color:white;background-color:blue;margin:20px;/*اضبط الهامش الخارجي على 20px*/padding : 20 px;/*اضبط المساحة المتروكة على 20px*/border:10pxdottedyellow;/*قم بتعيين حد منقط باللون الأصفر بعرض 10px*/}</style></head><body><pid=bg>سمة لون الخلفية</p </body></html>نتائج العرض هي كما يلي:
من نتائج التشغيل، يمكننا أن نرى أن سمة لون الخلفية يمكنها تعيين خلفية بلون خالص للعنصر. هذا اللون سوف يملأ المحتوى والحشو ومنطقة حدود العنصر (يمكن أيضًا فهمه على أنه حدود و جميع المناطق داخله). بالنسبة للعنصر المناطق خارج الحدود (الهوامش) ليس لها أي تأثير.
2. صورة الخلفية تحدد صورة الخلفية
صورة الخلفية:url(imgs/main_bg.jpg)،
إذا تم ضبط الخاصية في ملف css والصورة ليست في مجلد css فقم بإضافة المسار الذي أمامها للعودة إلى المجلد السابق.../
(1) تقوم سمة صورة الخلفية بتعيين صورة الخلفية للعنصر.
(2) تشغل خلفية العنصر الحجم الكامل للعنصر، بما في ذلك المساحة المتروكة والحدود، ولكن ليس الهوامش.
(3) افتراضيًا، توجد صورة الخلفية في الزاوية اليسرى العليا من العنصر وتتكرر أفقيًا وعموديًا.
(4) url('URL'): المسار الذي يشير إلى الصورة.
نصيحة: قم بتعيين لون الخلفية المتاح بحيث تبدو الصفحة جيدة في حالة عدم توفر صورة الخلفية.
3. تكرار صورة الخلفية الخلفية
افتراضيًا، ستغطي صورة الخلفية الصفحة بأكملها. إذا لم تكن صورة الخلفية كبيرة بما يكفي لتغطية الصفحة بأكملها، فسيتم تكرار صورة الخلفية في الإحداثي والإحداثي؛
4. حجم الخلفية يحدد حجم صورة الخلفية
5. وضع الخلفية يضبط موضع صورة الخلفية
القيم الافتراضية: اليسار، الأسفل، اليمين، الأعلى، الوسط (الوسط)
ملاحظة: يمكنك أيضًا استخدام القيم الرقمية أو النسب المئوية مثل موقف الخلفية: 10 بكسل 10 بكسل يمثل مسافة الإحداثيات الأفقية والرأسية من الحدود اليسرى والعلوية؛
6. هل تم ضبط مرفق الخلفية على الوضع الثابت؟
7.الخلفية المنشأ
الخلفية الأصل هي خاصية جديدة في CSS3. عند استخدام سمة موضع الخلفية لتعيين موضع صورة الخلفية، يتم حساب موضع الزاوية اليسرى العليا للعنصر بشكل افتراضي. يمكنك أيضًا استخدام سمة أصل الخلفية لتعيين الموضع النسبي لسمة موضع الخلفية لوضع صورة الخلفية. القيم الاختيارية لسمة أصل الخلفية هي كما يلي:
8. مقطع الخلفية
مقطع الخلفية هو سمة جديدة في CSS3، والتي من خلالها يمكن تعيين منطقة العرض لصورة الخلفية. القيم الاختيارية لسمة مقطع الخلفية هي كما يلي:
ملاحظة: تعني شفافية الخلفية أن خلفية الصندوق شفافة، ولا يتأثر المحتوى الموجود داخل الصندوق.
9. الخلفية
الخلفية هي اختصار لسمة الخلفية، ومن خلالها لا يمكنك فقط تعيين سمة خلفية معينة لعنصر ما، ولكن أيضًا تعيين سمات خلفية متعددة أو كلها في نفس الوقت. لا يوجد ترتيب ثابت عند تعيين خصائص خلفية متعددة، ولكن يوصى باستخدام الترتيب التالي:
لون الخلفية||صورة الخلفية||موضع الخلفية[/حجم الخلفية]؟||تكرار الخلفية||مرفق الخلفية||أصل الخلفية||مقطع الخلفية
ملاحظة: الفرق بين صورة الخلفية وسمة img:
(1) ينتمي عنصر img إلى مفهوم HTML، وصورة الخلفية تنتمي إلى مفهوم css.
(2) عندما تنتمي الصورة إلى محتوى الويب، يجب استخدام عنصر img
(3) عندما يتم استخدام الصورة فقط لتجميل الصفحة، يجب استخدام صورة الخلفية