استخدم CSS3 لتمديد صورة خلفية لتناسب صفحة ويب

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

إذا بدأت العمل مع صور الخلفية ، فستشغل بدون شك في السيناريو حيث تريد أن تمتد الصورة لتلائم الصفحة. ينطبق هذا بشكل خاص على مواقع الويب المتجاوبة التي يتم تسليمها لمجموعة واسعة من الأجهزة وأحجام الشاشات.

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

أفضل طريقة لتمديد صورة لملائمة خلفية الصفحة هي استخدام خاصية CSS3 ، لحجم الخلفية. في ما يلي مثال يستخدم صورة خلفية لجسم الصفحة ويضبط الحجم إلى 100٪ بحيث يتم امتداده دائمًا ليلاءم الشاشة.

الجسم { background: url (bgimage.jpg) no-repeat؛ حجم الخلفية: 100٪ }

وفقًا لموقع caniuse.com ، تعمل هذه الخاصية في IE 9+ و Firefox 4+ و Opera 10.5+ و Safari 5+ و Chrome 10.5+ وعلى جميع متصفحات الجوال الرئيسية. هذا يغطي لك جميع المتصفحات الحديثة المتاحة اليوم ، مما يعني أنه يجب عليك استخدام هذه الخاصية دون خوف من أنها لن تعمل على شاشة شخص ما.

Faking خلفية تمدد في المستعرضات الأقدم

من المستبعد جدًا أنك ستحتاج إلى دعم أي متصفحات أقدم من IE9 ، ولكن لنفترض أنك قلق من أن IE8 لا يدعم هذا الموقع. في تلك الحالة ، يمكنك مزيف خلفية ممتدة. ويمكنك استخدام بادئات المتصفح لـ Firefox 3.6 (-moz-الخلفية الحجم) و Opera 10.0 (-o-الخلفية الحجم).

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

id = "bg" />

1. أولاً ، تأكد من أن جميع المتصفحات تحتوي على ارتفاع بنسبة 100٪ ، وهوامش 0 ، وحشو 0 علىHTML الجسم عناصر. ضع ما يلي في رأس مستند HTML الخاص بك:
2. أضف الصورة التي تريد أن تكون الخلفية كالعنصر الأول لصفحة الويب ، واعطها هوية شخصية من "bg":
3. ضع صورة الخلفية بحيث تكون ثابتة في الأعلى واليسار وهي 100٪ و 100٪ في الارتفاع. أضف هذا إلى ورقة الأنماط الخاصة بك:
   1. img # bg {
   3. الموقع: ثابت
   5. أعلى: 0 ؛
   7. اليسار: 0 ؛
   9. العرض: 100 ٪.
   11. الارتفاع: 100٪ ؛
   13. }
4. إضافة كل المحتوى الخاص بك إلى الصفحة داخل DIV عنصر مع هوية شخصية من "المحتوى". أضف ال DIV تحت الصورة:كل المحتوى الخاص بك هنا - بما في ذلك الرؤوس والفقرات ، وما إلى ذلك
   1. ملاحظة: من المثير للاهتمام أن ننظر إلى صفحتك الآن. يجب أن تظهر الصورة ممتدة ، ولكن المحتوى الخاص بك مفقود تمامًا. لماذا ا؟ لأن صورة الخلفية هي 100٪ في الارتفاع ، وقسم المحتوى هو بعد الصورة في تدفق المستند - لن تعرض معظم المتصفحات.
5. ضع المحتوى الخاص بك بحيث يكون نسبيًا ويحتوي على ض مؤشر 1. سيجعله ذلك فوق صورة الخلفية في المتصفحات المتوافقة مع المعايير. أضف هذا إلى ورقة الأنماط الخاصة بك:
   1. #يحتوى {
   3. موقف: قريب
   5. ض مؤشر: 1.
   7. }
6. لكنك لم تنته لا يتوافق Internet Explorer 6 مع المعايير ولا يزال يواجه بعض المشكلات. هناك العديد من الطرق لإخفاء CSS من كل متصفح ولكن IE6 ، ولكن أسهلها (وأقلها إحتمال حدوث مشكلات أخرى) هي استخدام التعليقات الشرطية. ضع ما يلي بعد ورقة الأنماط في رأس المستند الخاص بك:
7. داخل التعليق المميز ، أضف ورقة أنماط أخرى مع بعض الأنماط للحصول على IE 6 للعب بشكل جميل:
8. تأكد من اختبار في IE 7 و IE 8 كذلك. قد تحتاج إلى تعديل التعليقات لدعمها أيضًا. ومع ذلك ، عملت عندما اختبرت ذلك.

موافق - وهذا هو المبالغة WIK. عدد قليل جدا من المواقع تحتاج إلى دعم IE 7 أو 8 بعد الآن ، أقل بكثير IE6! على هذا النحو ، هذا النهج هو عتيق ، وربما غير ضروري بالنسبة لك. أتركها هنا كنموذج للفضول حول مدى صعوبة الأمور قبل أن تلعب جميع المتصفحات معنا بشكل جيد!

Faking a Stretched Background Image على مساحة أصغر

يمكنك استخدام تقنية مشابهة لتزييف صورة خلفية ممتدة عبر DIV أو عنصر آخر على صفحة الويب الخاصة بك. يعد هذا الأمر أكثر تعقيدًا ، حيث يتعين عليك إما استخدام الموضع المطلق أو وجود مشكلات في المسافات الغريبة لأجزاء أخرى من صفحتك.

1. ضع الصورة على الصفحة التي أريد استخدامها كخلفية.
2. في ورقة الأنماط ، اضبط عرضًا وارتفاعًا للصورة. لاحظ أنه يمكنك استخدام النسب المئوية للعرض أو الارتفاع ، ولكن أجد أنه من الأسهل ضبط قيم الطول للارتفاع.
   1. img # bg {
   3. العرض: 20
   5. الطول: 30em؛
   7. }
3. ضع المحتوى الخاص بك في div مع هوية شخصية "المحتوى" كما فعلنا أعلاه:كل المحتوى الخاص بك هنا
4. صمم div للمحتوى ليكون بنفس العرض والارتفاع كصورة الخلفية:
   1. div # content {
   3. العرض: 20
   5. الطول: 30em؛
   7. }
5. ثم ضع المحتوى على نفس ارتفاع الصورة.لذا إذا كانت صورتك في 30 يومًا ، سيكون لديك نمط أعلى: -30 لا تنس وضع فهرس z واحد على المحتوى.
   1. #يحتوى {
   3. موقف: قريب
   5. top: -30em؛
   7. ض مؤشر: 1.
   9. العرض: 20
   11. الطول: 30em؛
   13. }
6. ثم قم بإضافة فهرس z -1 لمستخدمي IE 6 ، كما فعلت أعلاه:

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