في الوقت الحاضر، هناك طلب على مواقع الويب التي تحتوي على صور خلفية سريعة الاستجابة. توفر مواقع الويب سريعة الاستجابة للمستخدمين تجربة مستخدم مثالية على جميع الأجهزة تقريبًا بما في ذلك الهواتف المحمولة أو الأجهزة اللوحية أو أجهزة الكمبيوتر المكتبية. يمكن للصور المستجيبة أن تتكيف مع خلفية موقع الويب وحجم الشاشة والأبعاد. تضمن الصور المستجيبة الحفاظ على الجودة والتناسب. بالإضافة إلى ذلك، يتم تحميل موقع الويب الذي يحتوي على صور خلفية سريعة الاستجابة بسرعة.
سيوفر هذا الدليل تعليمات لتكييف صور الخلفية مع أبعاد الشاشة.
كيفية تكييف صور الخلفية مع أبعاد الشاشة؟
يمكن أن تتكيف الصورة مع أبعاد الشاشة من خلال اتباع الإرشادات التدريجية الواردة أدناه.
الخطوة 1: إنشاء بنية HTML
أولاً، قم بإنشاء بنية HTML وأضف ورقة الأنماط الخارجية باستخدام ملف <رابط> علامة في قسم الرأس في HTML. ولهذا الغرض، ما عليك سوى وضع ' ' داخل علامة الرأس. ال ' rel تحدد العلامة علاقة الملف بمستند HTML. ال ' href تحدد العلامة عنوان ملف CSS:
< لغة البرمجة >
< رأس >
< وصلة ريل = 'ورقة الأنماط' href = 'style.css' >
< عنوان > صورة خلفية مستجيبة عنوان >
رأس >
< جسم >
-- منطقة لإضافة المحتوى الآخر-- >
جسم >
لغة البرمجة >
الخطوة 2: تطبيق CSS
الآن قم بتطبيق CSS على ' جسم ' قسم. أولاً، حدد صورة الخلفية. ولهذا الغرض، استخدم ' الصورة الخلفية ' وحدد ' رابط () 'القيمة التي تحتوي على عنوان ملف الصورة.
بعد ذلك استخدم ' الصورة الخلفية ' لتحديد حجم الصورة، ' تكرار الخلفية 'خاصية ضبط تكرار الصورة، و' مرفق الخلفية ' لتعيين ما إذا كانت الصورة سيتم تمريرها مع بقية الصفحة أم لا. وأخيرًا، قم بتعيين ' هامِش ' و ' حشوة ' ل ' 0 ':
جسم {صورة الخلفية: url ( 'اختبار-image.jpg' ) ;
حجم الخلفية: 100 % 100 % ;
/* قم بتوسيع الصورة إلى 100 % العرض و 100 % ارتفاع */
تكرار الخلفية: عدم التكرار؛
مرفق الخلفية: ثابت؛
هامِش: 0 ;
حشوة: 0 ;
/* اختياري: خلفية ثابتة */
}
انتاج |
هذا هو الإخراج قبل التعاقد على نافذة المتصفح:
بعد تقليص المتصفح:
يؤكد الإخراج أعلاه أن الصورة قامت بتكييف الخلفية مع أبعاد الشاشة.
خاتمة
لتكييف صور الخلفية مع أبعاد الشاشة، قم أولاً بتضمين ' إطار العرض 'في قسم الرأس للتحكم في الأبعاد والقياس. ثم قم بإنشاء بنية HTML وقم بتطبيق CSS. في CSS، قم بتعيين ' حجم الخلفية 'قيمة العقار إلى' غطاء 'قيمة لقياس ارتفاع الصورة وعرضها. قدمت هذه المقالة دليلاً كاملاً لتكييف صور الخلفية مع أبعاد الشاشة.