Настройка на GIF „ Формат за обмен на графики ” като фоново изображение добавя визуално привлекателен елемент към дизайна. GIF позволява на разработчиците да предадат информация или да подчертаят продукт или услуга, което помага при създаването на визуална идентичност на марката. Разработчиците обаче трябва да гарантират, че използването на GIF файлове не претоварва уеб страницата и не отвлича вниманието на потребителя от основното съдържание.

Тази статия демонстрира процедурата за задаване на GIF като фоново изображение на уеб страницата.

Как да задам GIF като фоново изображение на уеб страницата?

Задаването на GIF като фоново изображение помага при създаването на привличащи окото елементи чрез добавяне на визуални елементи.

GIF файловете са особено полезни на уебсайтове, които искат да предадат усещане за игривост или причудливост, или на страници, които искат да подчертаят определен продукт или функция. За да го зададете като фоново изображение, посетете следните примери:

Пример 1: Задаване на GIF като фиксиран фон

Тъй като HTML елементите, които помагат при изграждането на съдържанието на уеб страницата, се поставят вътре в „ <тяло> ” таг. Ето защо, избирайки „ тяло ” елемент и прилагане на CSS свойства върху него. Той засяга всички съдържащи HTML елементи на „ <тяло> ” таг.

Например „

' и '

” таговете се използват като съдържание на уеб страницата. Вижте кодовия фрагмент по-долу:

< тяло >
< h1 > Настройка на GIF като фоново изображение на страницата h1 >
< стр > Този GIF е добавен като фоново изображение на цялата страница, използвайки 'фоново изображение' Имот. Тази статия е предоставена от Linuxhint. стр >
тяло >

Сега изберете HTML елемента „body“ вътре в „ <стил> ” етикет или в отделен “ CSS ”, за да приложите стил върху уеб страницата:

тяло {
фоново изображение: url ( „море.gif“ ) ;
фоново повторение: без повторение;
размер на фона: корица;
padding:50px;
размер на шрифта: x-голям;
цвят: бял;
}

В горния кодов блок:

• • Първо, „ url() ” се използва методът, който съхранява пътя на „ GIF ” файл. И този метод се предава като стойност на CSS ' фоново изображение ' Имот.
  • След това задайте „ не-повтаряне ' като стойност за CSS ' фоново повторение ” свойство за повторението на GIF файла.
  • След това задайте стойността на „ Покрийте „към CSS“ размер на фона ”, за да покрие цялото налично пространство
  • След това въведете стойността на „ 50px ' и ' x-голям „към CSS“ подплата ' и ' размер на шрифта ” имоти, респ. Това добавя разстояние около текста и увеличава размера на шрифта.

След компилацията уеб страницата изглежда така:

Горният резултат показва, че gif е добавен като фон на уеб страницата.

Пример 2: Задаване на GIF като превъртащ се фон

Първоначално създайте HTML структура, за да създадете съдържание на уеб страница като това:

< див клас = 'contai' >
< h1 > Настройка на GIF като фоново изображение на страницата h1 >
< стр > Този GIF е добавен като фоново изображение на цялата страница с помощта на 'фоново изображение' Имот. Тази статия е предоставена от Linuxhint. стр >
див >

< див >
< h3 стил = 'цвят:бял;' > Съдържание, написано извън 'div' елемент h3 >
див >

В горния код:

• • Първо, родителят „
    ” тагът се използва с клас от „ съдържат ”.
  • След това използвайте „ h1 ' и ' стр ” HTML елементи и им предоставя фиктивно съдържание.
  • След това създайте друг „
    ” и използвайте „

    ” чрез предоставяне на фиктивни данни към него.

Сега добавете GIF като фон на уеб страницата, като вмъкнете следните CSS свойства:

.contai {
фоново изображение: url ( sea.gif ');
фоново повторение: без повторение;
размер на фона: корица;
височина: 100vh;
дисплей: гъвкав;
подравняване на елементи: център;
justify-content: център;
flex-direction: колона;
цвят: бял;
размер на шрифта: голям;
подравняване на текст: център;
подложка: 2 rem;
}

Описанието на използвания по-горе кодов блок:

• • Първо задайте „ изображение-път ”, “ не-повтаряне t” и “ Покрийте ' като стойност за CSS ' фоново изображение ”, “ фоново повторение ' и ' размер на фона ” имоти, респ.
  • След това задайте стойността на „ 100vh ' и ' flex „към CSS“ височина ' и ' дисплей ' Имоти.
  • След това използвайте CSS ' цвят ”, “ размер на шрифта ”, “ подравняване на текст ' и ' подплата ”, за да приложите стил към съдържанието.

След края на процеса на компилиране уеб страницата изглежда така:

Изходът показва, че „ GIF ” е вмъкнато като фоново изображение на цялата страница.

Заключение

За да зададете GIF като фоново изображение на уеб страницата, CSS „ фоново изображение ' свойството се използва в HTML ' тяло ” елемент. Свойството CSS, което се прилага към елемента „body“, се прилага автоматично към всички съдържащи елементи. Като зададете „ 100vh ” като стойност към свойството височина, ефектът на превъртане също може да бъде активиран. Позволява на фоновия gif да се движи по скрола. Тази статия демонстрира как да зададете GIF като фоново изображение на уеб страницата.