فيما يلي كيفية إضافة صور تصميم متجاوبة باستخدام CSS
ألق نظرة على مواقع الويب الشهيرة اليوم ومعالجة تصميم واحدة من المؤكد أنك ستشاهدها هي صور خلفية كبيرة تمتد على الشاشة. أحد التحديات مع إضافة هذه الصور يأتي من أفضل الممارسات التي يجب أن تستجيب لها المواقع الإلكترونية بأحجام وشاشات مختلفة - وهو أسلوب يعرف باسم تصميم الويب سريع الاستجابة .
نظرًا لأن تخطيط موقعك على الويب يتغير ويتغير حجمه مع أحجام مختلفة للشاشة ، فإن صور الخلفية هذه أيضًا يجب أن تقيس حجمها وفقًا لذلك.
في الواقع ، هذه "الصور المتغيرة" هي واحدة من القطع الرئيسية لمواقع الويب المتجاوبة (إلى جانب الشبكة المرنة والاستعلامات الإعلامية). كانت هذه الأجزاء الثلاثة أساسية في تصميم الويب سريع الاستجابة منذ البداية ، ولكن على الرغم من أنه كان من السهل دائمًا إضافة صور مضمنة سريعة الاستجابة إلى موقع (الصور المضمنة هي الرسومات المشفرة كجزء من ترميز HTML) ، نفس الشيء مع صور الخلفية (التي تم تصميمها في الصفحة باستخدام خصائص الخلفية في CSS) لطالما قدم تحديًا كبيرًا للعديد من مصممي الويب ومطوري الواجهة الأمامية. لحسن الحظ ، فإن إضافة خاصية "حجم الخلفية" في CSS جعلت هذا ممكنًا.
في مقالة منفصلة ، تناولت كيفية استخدام حجم خلفية الخاصية CSS3 لتمديد الصور لتلائم نافذة ، ولكن هناك طريقة أفضل وأكثر فائدة لنشر هذه الخاصية. للقيام بذلك ، سوف نستخدم تركيبة الخاصية والقيمة التالية:
حجم الخلفية: غطاء ؛
تُخبر خاصية الكلمة الرئيسية للتصفح المتصفح بقياس الصورة لملائمة النافذة ، بغض النظر عن حجم أو حجم النافذة. يتم تحجيم الصورة لتغطية الشاشة بأكملها ، ولكن يتم الحفاظ على النسب الأصلية ونسبة العرض إلى الارتفاع سليمة ، مما يحول دون تشويه الصورة نفسها.
يتم وضع الصورة في النافذة أكبر حجم ممكن بحيث يتم تغطية سطح النافذة بالكامل. هذا يعني أنك لن يكون لديك أي بقع فارغة في الصفحة الخاصة بك أو أي تشويه على الصورة ، ولكن هذا يعني أيضًا أن بعض الصور قد يتم إزالتها بناءً على نسبة العرض إلى الارتفاع للشاشة والصورة المعنية. على سبيل المثال ، قد يتم قطع حواف الصورة (إما أعلى أو أسفل أو يسار أو يمين) على الصور ، اعتمادًا على القيم التي تستخدمها لخاصية موضع الخلفية. إذا قمت بتوجيه الخلفية إلى "أعلى اليسار" ، فإن أي فائض على الصورة سيأتي من الجانبين السفلي والأيمن. إذا قمت بتوسيط صورة الخلفية ، فستظهر الزيادة من جميع الجوانب ، ولكن بما أن هذا الفائض منتشر ، فسيكون التأثير على أي جانب أقل عرضًا.
كيفية استخدام حجم الخلفية: غطاء ؛
عند إنشاء صورة الخلفية ، من المستحسن إنشاء صورة كبيرة إلى حد كبير. في حين يمكن للمتصفحات أن تجعل الصورة أصغر بدون تأثير ملحوظ على جودة الصورة ، عندما يقوم المتصفح بتكبير حجم الصورة إلى حجم أكبر من الأبعاد الأصلية ، فإن الجودة المرئية سوف تتدهور ، وتصبح ضبابية ومقطورة. الجانب السلبي لهذا هو أن صفحتك تحصل على نتيجة أداء عندما تقدم صورًا عملاقة لجميع الشاشات.
عند القيام بذلك ، تأكد من إعداد هذه الصور بشكل صحيح لسرعة التنزيل وتسليم الويب . في النهاية ، تحتاج إلى العثور على الوسيط السعيد بين حجم كبير وجودة صورة كافية وحجم ملف معقول لسرعة التنزيل.
تتمثل إحدى الطرق الشائعة لاستخدام صور الخلفية في تغيير الحجم في الوقت الذي تريد فيه أن تلتقط هذه الصورة الخلفية الكاملة للصفحة ، وما إذا كانت هذه الصفحة واسعة ويتم عرضها على جهاز كمبيوتر مكتبي أو أصغر كثيرًا ويتم إرسالها إلى جهاز محمول أو محمول الأجهزة.
حمّل صورتك إلى مضيف الويب وأضفها إلى CSS كصورة خلفية:
background-image: url (fireworks-over-wdw.jpg)؛
تكرار الخلفية: لا تكرار ؛
خلفية الموقف: مركز المركز.
background-attachment: fixed؛
أضف المتصفح مسبوقًا CSS أولاً:
-webkit-background-size: cover؛
-moz-background-size: cover؛
-أو- حجم الخلفية: غطاء ؛
ثم قم بإضافة خاصية CSS:
حجم الخلفية: غطاء ؛
استخدام صور مختلفة تناسب البدائل المختلفة
على الرغم من أهمية التصميم المتجاوب لتجربة سطح المكتب أو الكمبيوتر المحمول ، إلا أن تنوع الأجهزة التي يمكنها الوصول إلى الويب قد نما بشكل ملحوظ ، كما أن هناك تنوعًا كبيرًا من أحجام الشاشات يأتي مع ذلك.
وكما ذكرنا سابقًا ، فإن تحميل صورة خلفية كبيرة الاستجابة على هاتف ذكي ، على سبيل المثال ، ليس تصميمًا فعالاً أو ذو نطاق ترددي عريض.
تعرّف على كيفية استخدام استعلامات الوسائط لعرض الصور التي ستكون مناسبة للأجهزة التي سيتم عرضها عليها ، بالإضافة إلى تحسين توافق موقعك على الويب مع أجهزة الجوال.
المقالة الأصلية لجينفر كرينين. حرره جيريمي جيرار 9/12/17