مقدمة
يمكننا تحديد حجم صورة الخلفية بمساعدة خاصية حجم الخلفية. يمكننا أن نجعل الصورة كما هي على اليسار، وممتدة، ومناسبة للمساحة المتاحة. هناك العديد من صيغ الجملة لتنفيذ خاصية حجم الخلفية. يمكننا تعيين خاصية حجم الخلفية بمساعدة القيم وقيم الوحدة.
في قيم الوحدة، يمكننا تحديد خاصية حجم الخلفية في شكل نسب مئوية أو بكسل. يمكننا تعريفها بمساعدة القيمة العالمية أيضًا. يمكننا تنفيذه بمساعدة القيمة العالمية من خلال مساعدة المقتطف أدناه.
اختصارات لينكس
.card-hero inherit
دعونا نفهم الموضوع لفترة وجيزة.
قيم الكلمات الرئيسية
يمكننا استخدام قيمة الكلمة الرئيسية بمساعدة الغلاف والاحتواء. يمكننا تغيير حجم الخلفية بمساعدة قيم الكلمات الرئيسية هذه.
1. الغلاف:
يمكننا ضبط حجم الخلفية بمساعدة كلمة الغلاف الأساسية. إذا حددنا حجم الخلفية كغلاف، فسوف تتناسب الصورة مع الحاوية دون ترك أي مساحة. كما أنه سيعزز الصورة لتناسب الشاشة.
دعونا نفهم هذا بمساعدة المثال أدناه.
مثال 1:
إضافة جافا إلى المصفوفة
شفرة:
Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url('https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp'); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> انتاج |
توضيح:
في الكود أعلاه، تم دمج ثلاث صور خلفية باستخدام خاصية صورة الخلفية. تحدد خاصية حجم الخلفية الأحجام لكل صورة خلفية: 30% عرض للصورة الأولى، 40% عرض للصورة الثانية، وغطاء للصورة الثالثة. يتم تعيين خاصية موضع الخلفية بشكل مختلف لكل صورة لإنشاء تركيبة متوازنة.