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

توضح هذه المقالة إجراء تعيين GIF كصورة خلفية على صفحة الويب.

كيفية تعيين GIF كصورة خلفية على صفحة الويب؟

يساعد إعداد صورة GIF كصورة خلفية في إنشاء عناصر لافتة للنظر عن طريق إضافة عناصر مرئية.

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

مثال 1: إعداد GIF كخلفية ثابتة

حيث يتم وضع عناصر HTML التي تساعد في بناء محتوى صفحة الويب داخل ' <الجسم> ' بطاقة شعار. لهذا السبب ، فإن اختيار ' جسم 'وتطبيق خصائص CSS عليه. إنه يؤثر على جميع عناصر HTML التي تحتوي على ' <الجسم> ' بطاقة شعار.

على سبيل المثال ، '

' و '

'العلامات كمحتوى لصفحة الويب. انظر أدناه مقتطف الرمز:

< جسم >
< h1 > إعداد GIF مثل صورة خلفية على الصفحة h1 >
< ص > تمت إضافة هذا GIF مثل صورة خلفية على الصفحة بأكملها باستخدام 'الصورة الخلفية' ملكية. هذه المقالة مدعومة من Linuxhint. ص >
جسم >

الآن ، حدد عنصر HTML 'body' داخل ' <ستايل> 'أو في' منفصل ' CSS 'لتطبيق النمط على صفحة الويب:

جسم {
صورة الخلفية: url ( 'sea.gif' ) ؛
تكرار الخلفية: لا تكرار ؛
حجم الخلفية: غطاء ؛
الحشو: 50 بكسل ؛
حجم الخط: x-large ؛
اللون الابيض؛
}

في كتلة التعليمات البرمجية أعلاه:

• • لأول مرة ' عنوان url () 'الذي يخزن مسار' GIF ' ملف. ويتم تمرير هذه الطريقة كقيمة إلى CSS ' الصورة الخلفية ' ملكية.
  • بعد ذلك ، اضبط ' لا تكرار 'كقيمة لـ CSS' تكرار الخلفية ”لتكرار ملف GIF.
  • ثم ، عيّن قيمة ' غطاء 'إلى CSS' حجم الخلفية ”لتغطية كل المساحة المتاحة
  • بعد ذلك ، قم بتوفير قيمة ' 50 بكسل ' و ' x-كبير 'إلى CSS' حشوة ' و ' حجم الخط '، على التوالي. يؤدي ذلك إلى إضافة مسافات حول النص وتضخيم حجم الخط.

بعد التجميع ، تبدو صفحة الويب كما يلي:

يوضح الإخراج أعلاه إضافة صورة gif كخلفية على صفحة الويب.

مثال 2: إعداد GIF كخلفية قابلة للتمرير

في البداية ، قم بإنشاء بنية HTML لإنشاء محتوى صفحة ويب مثل هذا:

< شعبة فصل = 'تابع' >
< h1 > إعداد GIF مثل صورة خلفية على الصفحة h1 >
< ص > تمت إضافة هذا GIF مثل صورة خلفية على الصفحة بأكملها باستخدام امتداد 'الصورة الخلفية' ملكية. هذه المقالة مدعومة من Linuxhint. ص >
شعبة >

< شعبة >
< h3 أسلوب = 'اللون الابيض؛' > محتوى مكتوب خارج 'div' عنصر h3 >
شعبة >

في الكود أعلاه:

• • أولاً ، الوالد '
    'العلامة مع فئة' يحتوي '.
  • بعد ذلك ، استخدم ' h1 ' و ' ص 'عناصر HTML وتقديم محتوى وهمي لهم.
  • بعد ذلك ، قم بإنشاء '
    'والاستفادة من'

    'من خلال توفير بيانات وهمية لها.

الآن ، أضف GIF كخلفية على صفحة الويب عن طريق إدراج خصائص CSS التالية:

.contai {
صورة الخلفية: url ( sea.gif ') ؛
تكرار الخلفية: لا تكرار ؛
حجم الخلفية: غطاء ؛
الارتفاع: 100 فولت
العرض: فليكس ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: مركز ؛
الاتجاه المرن: العمود.
اللون الابيض؛
حجم الخط: كبير ؛
محاذاة النص: مركز ؛
الحشو: 2rem.
}

وصف كتلة التعليمات البرمجية المستخدمة أعلاه:

• • أولاً ، قم بتعيين ' مسار الصورة '،' لا تكرار ر 'و' غطاء 'كقيمة لـ CSS' الصورة الخلفية '،' تكرار الخلفية ' و ' حجم الخلفية '، على التوالي.
  • بعد ذلك ، حدد قيمة ' 100vh ' و ' ثني 'إلى CSS' ارتفاع ' و ' عرض ' ملكيات.
  • بعد ذلك ، استخدم CSS ' لون '،' حجم الخط '،' محاذاة النص ' و ' حشوة 'لتطبيق النمط على المحتوى.

بعد انتهاء عملية التجميع ، تبدو صفحة الويب كما يلي:

يعرض الإخراج أن ' GIF 'كصورة خلفية في الصفحة بأكملها.

خاتمة

لتعيين GIF كصورة خلفية على صفحة الويب ، فإن CSS ' الصورة الخلفية 'على HTML' جسم ' عنصر. يتم تطبيق خاصية CSS التي يتم تطبيقها على عنصر 'body' تلقائيًا على جميع العناصر المحتوية. من خلال تحديد ' 100vh 'كقيمة لخاصية الارتفاع ، يمكن أيضًا تمكين تأثير التمرير. يسمح لصورة الخلفية بالتحرك على طول التمرير. لقد أوضحت هذه المقالة كيفية تعيين GIF كصورة خلفية على صفحة الويب.