Установка GIF» Формат обмена графикой » в качестве фонового изображения добавляет в дизайн визуально привлекательный элемент. GIF позволяет разработчикам передавать информацию или выделять продукт или услугу, что помогает создать визуальную идентичность бренда. Однако разработчики должны следить за тем, чтобы использование GIF-файлов не перегружало веб-страницу и не отвлекало пользователя от основного контента.
В этой статье демонстрируется процедура установки GIF в качестве фонового изображения на веб-странице.
Как установить GIF в качестве фонового изображения на веб-странице?
Установка GIF в качестве фонового изображения помогает создавать привлекающие внимание элементы путем добавления визуальных элементов.
GIF-файлы особенно полезны на веб-сайтах, которые хотят передать ощущение игривости или причудливости, или на страницах, которые хотят выделить определенный продукт или функцию. Чтобы установить его в качестве фонового изображения, посетите следующие примеры:
Пример 1: установка GIF в качестве фиксированного фона
Поскольку элементы HTML, которые помогают в создании содержимого веб-страницы, помещаются внутри « <тело> ' ярлык. Именно поэтому, выбирая « тело ” и применить к нему свойства CSS. Это влияет на все содержащие HTML-элементы « <тело> ' ярлык.
Например, « ' и ' » используются в качестве содержимого веб-страницы. См. приведенный ниже фрагмент кода:
< тело >
< h1 > Настройка гифка как фоновое изображение на странице h1 >
< п > Этот GIF был добавлен как фоновое изображение на всю страницу, используя 'изображение на заднем плане' Свойство. Эта статья написана на Linuxhint. п >
тело >
Теперь выберите HTML-элемент «body» внутри « <стиль> ” или в отдельном “ CSS », чтобы применить стиль к веб-странице:
фоновое изображение: URL ( 'море.gif' ) ;
фоновый повтор: без повтора;
размер фона: обложка;
отступ: 50 пикселей;
размер шрифта: x-большой;
белый цвет;
}
В приведенном выше блоке кода:
-
- Во-первых, « URL() », который сохраняет путь к « гифка ' файл. И этот метод передается как значение в CSS». изображение на заднем плане ' свойство.
- Далее установите « неповторяющийся 'в качестве значения для CSS' фоновый повтор ” для повторения файла GIF.
- Затем установите значение « крышка 'к CSS' размер фона ” чтобы покрыть все доступное пространство
- После этого укажите значение « 50 пикселей ' и ' х-большой 'к CSS' набивка ' и ' размер шрифта свойства соответственно. Это добавляет интервал вокруг текста и увеличивает размер шрифта.
После компиляции веб-страница выглядит так:
Приведенный выше вывод показывает, что в качестве фона на веб-странице был добавлен gif.
Пример 2. Установка GIF в качестве прокручиваемого фона
Сначала создайте структуру HTML, чтобы содержимое веб-страницы выглядело следующим образом:
< див сорт '=' 'контай' >< h1 > Настройка гифка как фоновое изображение на странице h1 >
< п > Этот GIF был добавлен как фоновое изображение на всю страницу с помощью 'изображение на заднем плане' Свойство. Эта статья написана на Linuxhint. п >
див >
< див >
< h3 стиль '=' 'белый цвет;' > Контент, написанный за пределами 'див' элемент h3 >
див >
В приведенном выше коде:
-
- Во-первых, родитель» <дел> » используется с классом « содержать ».
- Далее используйте « h1 ' и ' п HTML-элементы и предоставить им фиктивный контент.
- После этого создайте еще один « <дел> » и использовать « », предоставив ему фиктивные данные.
Теперь добавьте GIF в качестве фона на веб-страницу, вставив следующие свойства CSS:
.contai {фоновое изображение: URL ( море.gif ');
фоновый повтор: без повтора;
размер фона: обложка;
высота: 100вх;
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: по центру;
flex-направление: столбец;
белый цвет;
размер шрифта: большой;
выравнивание текста: по центру;
набивка: 2рем;
}
Описание использованного выше блока кода:
-
- Сначала установите « образ-путь », « неповторяющийся т» и « крышка 'в качестве значения для CSS' изображение на заднем плане », « фоновый повтор ' и ' размер фона свойства соответственно.
- Далее установите значение « 100vh ' и ' сгибаться 'к CSS' высота ' и ' отображать ' характеристики.
- После этого используйте CSS « цвет », « размер шрифта », « выравнивание текста ' и ' набивка », чтобы применить стиль к содержимому.
После завершения процесса компиляции веб-страница выглядит так:
Вывод показывает, что « гифка ” был вставлен в качестве фонового изображения на всю страницу.
Заключение
Чтобы установить GIF в качестве фонового изображения на веб-странице, CSS « изображение на заднем плане » свойство используется в HTML « тело элемент. Свойство CSS, применяемое к элементу body, автоматически применяется ко всем содержащимся элементам. Установив « 100vh ” в качестве значения свойства height также можно включить эффект прокрутки. Это позволяет фоновому gif перемещаться по прокрутке. В этой статье показано, как установить GIF в качестве фонового изображения на веб-странице.