Подешавање ГИФ-а “ Формат за размену графике ” као позадинска слика додаје визуелно привлачан елемент дизајну. ГИФ омогућава програмерима да пренесу информације или истакну производ или услугу која помаже у креирању визуелног идентитета бренда. Међутим, програмери морају осигурати да употреба ГИФ-ова не преоптерећује веб страницу или одврати корисника од главног садржаја.
Овај чланак показује процедуру постављања ГИФ-а као позадинске слике на веб страници.
Како поставити ГИФ као позадину на веб страници?
Постављање ГИФ-а као позадинске слике помаже у стварању привлачних елемената додавањем визуелних елемената.
ГИФ-ови су посебно корисни на веб локацијама које желе да пренесу осећај разиграности или хировитости, или на страницама које желе да истакну одређени производ или функцију. Да бисте га поставили, као позадину, посетите следеће примере:
Пример 1: Постављање ГИФ-а као фиксне позадине
Пошто су ХТМЛ елементи који помажу у изградњи садржаја веб странице смештени унутар „ <боди> ” ознака. Због тога, одабиром „ тело ” елемент и примену ЦСС својстава на њега. Утиче на све ХТМЛ елементе који садрже „ <боди> ” ознака.
На пример, „ <х1> ' и ' <п> ” ознаке се користе као садржај веб странице. Погледајте доњи исечак кода:
< тело >
< х1 > Подешавање ГИФ-а као позадинска слика на страници х1 >
< стр > Овај ГИФ је додат као позадинску слику на целој страници користећи 'позадинска слика' Имовина. Овај чланак је покренуо Линукхинт. стр >
тело >
Сада изаберите ХТМЛ елемент „тело“ унутар „ <стиле> ” или у посебној “ ЦСС ” датотека за примену стила на веб страници:
бацкгроунд-имаге: урл ( 'сеа.гиф' ) ;
бацкгроунд-репеат: без понављања;
величина позадине: корице;
паддинг:50пк;
фонт-сизе: к-ларге;
бела боја;
}
У горњем блоку кода:
-
- Прво, „ урл() ” се користи метода која чува путању „ ГИФ ” фајл. И овај метод се прослеђује као вредност у ЦСС “ позадинска слика ' имовина.
- Затим поставите „ без понављања ” као вредност за ЦСС “ бацкгроунд-репеат ” својство за понављање ГИФ датотеке.
- Затим поставите вредност „ поклопац ” у ЦСС “ величина позадине ” својство да покрије сав расположиви простор
- Након тога наведите вредност „ 50пк ' и ' к-велики ” у ЦСС “ паддинг ' и ' фонт-сизе ” својства, респективно. Ово додаје размак око текста и повећава величину фонта.
Након компилације, веб страница изгледа овако:
Горњи излаз показује да је гиф додат као позадина на веб страници.
Пример 2: Постављање ГИФ-а као позадине која се може померати
У почетку направите ХТМЛ структуру да бисте направили садржај веб странице овако:
< див класа = 'цонтаи' >< х1 > Подешавање ГИФ-а као позадинска слика на страници х1 >
< стр > Овај ГИФ је додат као позадинску слику на целој страници користећи 'позадинска слика' Имовина. Овај чланак покреће Линукхинт. стр >
див >
< див >
< х3 стил = 'бела боја;' > Садржај написан изван 'див' елемент х3 >
див >
У горњем коду:
-
- Прво, родитељ „ <див> ” ознака се користи са класом “ садржати ”.
- Затим користите „ х1 ' и ' стр ” ХТМЛ елементе и обезбедити лажни садржај за њих.
- Након тога, креирајте још један „ <див> “ и користите „ <х3> ” тако што ћете јој дати лажне податке.
Сада додајте ГИФ као позадину на веб страници тако што ћете уметнути следећа ЦСС својства:
.цонтаи {бацкгроунд-имаге: урл ( сеа.гиф ');
бацкгроунд-репеат: без понављања;
величина позадине: корице;
висина: 100вх;
дисплеј: флек;
алигн-итемс: центар;
јустифи-цонтент: центар;
флек-дирецтион: колона;
бела боја;
величина фонта: велика;
тект-алигн: центар;
паддинг: 2рем;
}
Опис горе коришћеног кодног блока:
-
- Прво поставите „ имаге-патх ”, “ без понављања т' и ' поклопац ” као вредност за ЦСС “ позадинска слика ”, “ бацкгроунд-репеат ' и ' величина позадине ” својства, респективно.
- Затим поставите вредност „ 100вх ' и ' флек ” у ЦСС “ висина ' и ' приказ ” својства.
- Након тога, користите ЦСС “ боја ”, “ фонт-сизе ”, “ Поравнање текста ' и ' паддинг ” својства за примену стила на садржај.
Након завршетка процеса компилације, веб страница изгледа овако:
Излаз приказује да је „ ГИФ ” је уметнута као позадинска слика на целој страници.
Закључак
Да бисте поставили ГИФ као позадину на веб страници, ЦСС “ позадинска слика ” својство се користи на ХТМЛ-у “ тело ” елемент. ЦСС својство које се примењује на елемент „боди“ аутоматски се примењује на све елементе који садрже. Постављањем „ 100вх ” као вредност својства висине, ефекат померања се такође може омогућити. Омогућава позадинском гифу да се креће дуж померања. Овај чланак је показао како да поставите ГИФ као позадину на веб страници.