Садржај

• На корак
• Метод 1 од 4: Подешавање пуне боје позадине
• Метод 2 од 4: Коришћење слике као позадине
• Метод 3 од 4: Креирајте градијентну позадину
• Метод 4 од 4: Поставите анимацију у боји као позадину

Да бисте могли да подесите позадину веб странице у ХТМЛ-у, потребно је само да направите малу промену у елементу „боди“ унутар стил> / стил> ознаке. Кораци зависе од тога како желите да изгледају ваше позадине. Научите како поставити позадину веб локације као једнобојну, сликовну, градијентну или колор анимацију.

На корак

Метод 1 од 4: Подешавање пуне боје позадине

1. Отворите ХТМЛ датотеку у свом омиљеном уређивачу текста. Од ХТМЛ5, ХТМЛ атрибут бгцолор> више није подржан. Боја позадине, као и сви други стилски аспекти ваше странице, мора бити подешена са ЦСС-ом.
2. Додајте стил> / стил> означава ваш документ. Сви подаци о стилу за вашу страницу (укључујући боју позадине) требају бити кодирани унутар ових ознака. Да ли имате стил> већ означене ознаке, онда можете само да се померите до тог дела датотеке.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> / стиле> / хеад> / хтмл>

3. Укуцајте елемент "боди" унутар стил> / стил> ознаке. Све што промените у елемент "боди" у ЦСС-у утицаће на целу страницу.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {} / стиле> / хеад> боди> / боди> / хтмл>

4. Додајте својство „бацкгроунд-цолор“ елементу „боди“. У овом контексту ће радити само један правопис "боја" (не: боја).

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {бацкгроунд-цолор:} / стиле> / хеад> боди> / боди> / хтмл>

5. Поставите жељену боју позадине иза „бацкгроунд-цолор“. Сада можете навести назив боје (зелена, Плави, издитд.), користите хексадецималне (хексадецималне) кодове (нпр. #000000 за црно, # фф0000 за црвену итд.) или уношењем РГБ вредности за боју (као што је ргб (255,255,0) за жуто). Испод је пример са хексадексималним кодовима, чинећи позадину једнаком као банер викиХов:

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {бацкгроунд-цолор: # 93Б874; } / стиле> / хеад> боди> / боди> / хтмл>

   • Бео: #ФФФФФФ
   • Светло розе: # ФФЦЦЕ6
   • Спаљена Сијена: #993300
   • Индиго - # 4Б0082
   • Виолет - # ЕЕ82ЕЕ
   • Погледајте в3сцхоолс.цом ХТМЛ бирач боја да бисте пронашли хек кодове било које боје коју желите.
6. Користите „бацкгроунд-цолор“ за примену боја позадине на друге елементе. Баш као што сте поставили елемент тела, можете користити боју позадине за подешавање позадине осталих елемената. Само ставите те елементе у стил> / стил> са својством бацкгроунд-цолор.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {бацкгроунд-цолор: # 93Б874; } х1 {боја позадине: наранџаста; } п {позадина-боја: ргб (255,0,0); } / стиле> / хеад> боди> х1> Ово заглавље добија наранџасту позадину / х1> п> Овај пасус добија црвену позадину / п> / боди> / хтмл>

Метод 2 од 4: Коришћење слике као позадине

1. Отворите ХТМЛ датотеку у уређивачу текста. Многи људи радије користе слику као позадину своје веб странице. Помоћу овога можете поставити узорак, текстуру, фотографију или било коју другу слику као позадину. Од ХТМЛ5, све позадине морају бити постављене са ЦСС (Цасцадинг Стиле Схеетс) у оквиру стил> / стил> ознаке.
2. Додајте стил> / стил> ознаке у вашу ХТМЛ датотеку. Сви подаци о стилу за вашу страницу (укључујући боју позадине) требају бити наведени унутар ових ознака. Јесте ли већ стил> ознаке, померите се до тог дела датотеке.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> / стиле> / хеад> / хтмл>

3. Укуцајте елемент "боди" унутар стил> / стил> ознаке. Све што промените у елемент "боди" у ЦСС-у утицаће на целу страницу.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {} / стиле> / хеад> боди> / боди> / хтмл>

4. Додајте својство "бацкгроунд-имаге" елементу "боди". Приликом додавања овог својства биће вам потребно име датотеке ваше слике. Уверите се да је слика сачувана у истој фасцикли као и хтмл датотека (или додајте целу путању до датотеке на веб сервер).

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {бацкгроунд-имаге: урл ("имагенаме.пнг"); позадина-боја: # 93Б874; } / стиле> / хеад> боди> / боди> / хтмл>

   • Добро је укључити код боја позадине за случај да се слика у позадини не учита.
5. Слој више слика. Можете наслагати више слика једну на другу. Ово може бити корисно ако имате слике са прозирном позадином које се допуњују када се наложе.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {бацкгроунд-имаге: урл ("имаге1.пнг"), урл ("имаге2.гиф"); позадина-боја: # 93Б874; } / стиле> / хеад> боди> / боди> / хтмл>

   • Прва слика је на врху. Друга слика је испод прве.

Метод 3 од 4: Креирајте градијентну позадину

1. Користите ЦСС за креирање градијентне позадине. Ако тражите нешто мало стилизованије од пуне боје, али нисте толико заузети као анимација у боји, испробајте градијентну позадину. Градијенти су боје које се мењају у друге једнакости. Можете користити ЦСС да бисте креирали и прилагодили свој градијент. Пре него што започнете са креирањем градијента боја, требало би да стекнете довољно знања о основама форматирања веб странице помоћу ЦСС-а.
2. Разумети стандардну синтаксу. Приликом стварања градијента потребне су вам две информације: почетна тачка и почетни угао, као и боје између којих ће се догодити прелаз. Можете одабрати више боја које се све преклапају, а можете одредити правац или угао за градијент.

   позадина: линеарни градијент (правац / угао, боја1, боја2, боја3 итд.);

3. Направите вертикални градијент. Ако не назначите правац, боја ће се кретати од врха до дна. Различити прегледачи имају различите верзије функције градијента, па ћете морати да додате различите верзије кода.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> хтмл {мин-хеигхт: 100%; / * Ово је потребно да би се осигурало да се градијент протеже на целој страници * /} тело {бацкгроунд: -вебкит-линеар-градиент (# 93Б874, # Ц9ДЦБ9); / * Цхроме 10+, Сафари 5.1+ * / бацкгроунд: -о-линеар-градиент (# 93Б874, # Ц9ДЦБ9); / * Опера 11.1+ * / бацкгроунд: -моз-линеар-градијент (# 93Б874, # Ц9ДЦБ9); / * Фирефок 3.6+ * / позадина: линеарни градијент (# 93Б874, # Ц9ДЦБ9); / * Подразумевана синтакса (мора бити последња) * / бацкгроунд-цолор: # 93Б874; / * Добра је идеја поставити боју позадине, у случају да се градијент не учита * /} / стиле> / хеад> боди> / боди> / хтмл>

4. Направите градијент са правцем. Додавање смера градијенту омогућава вам подешавање начина на који се боја мења. Имајте на уму да ће различити прегледачи различито тумачити упутства. Сви ће показати исти градијент боје.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> хтмл {мин-хеигхт: 100%; } тело {позадина: -вебкит-линеар-градијент (лево, # 93Б874, # Ц9ДЦБ9); / * с лева на десно * / позадина: -о-линеарни градијент (десно, # 93Б874, # Ц9ДЦБ9); / * крај десно * / позадина: -моз-линеарни градијент (десно, # 93Б874, # Ц9ДЦБ9); / * крај десно * / позадина: линеарни градијент (десно, # 93Б874, # Ц9ДЦБ9); / * помера се на десну страну * / бацкгроунд-цолор: # 93Б874; / * добра је идеја поставити боју позадине, у случају да се градијент неће учитати * /} / стиле> / хеад> боди> / боди> / хтмл>

5. Користите друга својства за подешавање градијента. Пуно више можете да урадите са градијентима.
   • На пример, не само да можете да користите више од две боје, већ и ставите проценат иза сваке. Овим можете назначити колико ће простора добити сваки сегмент боје.

     позадина: линеарни градијент (# 93Б874 10%, # Ц9ДЦБ9 70%, # 000000 90%);

   • Додајте прозирност бојама. Овим можете избледети боје. Користите исту боју да бисте из ње прешли у ништа. Свидеће вам се функција ргба () мора користити за означавање боје. Крајња вредност одређује степен транспарентности: 0 за непрозирне и 1 за провидне.

     позадина: линеарни градијент (надесно, ргба (147,184,116.0), ргба (147,184,116.1));

Метод 4 од 4: Поставите анимацију у боји као позадину

1. Иди на стил> у вашем ХТМЛ коду. Ако пронађете солидну боју позадине, али не, експериментишите са променом позадине боје. Из ХТМЛ 5, боје позадине морају бити дефинисане ЦСС-ом (каскадни табели стилова). Ако никада нисте поставили боју позадине са ЦСС-ом, прочитајте одељак о подешавању пуне боје позадине пре него што испробате овај метод.
2. Додајте својство анимација на елемент „тело“. Мораћете да додате 2 различита својства, јер сваки прегледач захтева другачији код.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {-вебкит-аниматион: цолорцханге 60с инфините; анимација: промена боје 60-их бесконачно; } / стиле> / хеад> боди> / боди> / хтмл>

   • -вебкит-анимација својство је потребно за прегледаче засноване на Цхроме-у (Цхроме, Опера, Сафари). анимација је стандард за све остале прегледаче.
   • размена боја је оно што се у овом примеру назива анимацијом.
   • 60-их је трајање (60 секунди) анимације / преласка. Обавезно поставите ово и за вебкит и за подразумевану синтаксу.
   • бесконачно указује на то да би анимација требало да се понавља унедоглед. Ако више волите да петљате боје, а затим се зауставите на последњој боји, овај део можете изоставити.
3. Додајте анимацији боје. Сада ћете помоћу правила @кеифрамес поставити боје позадине кроз које треба проћи, као и колико дуго се свака боја може видети на страници. Опет, мораћете да додате више кодирања за различите прегледаче.

   ! ДОЦТИПЕ хтмл> хтмл> хеад> стиле> боди {-вебкит-аниматион: цолорцханге 60с инфините; анимација: промена боје 60-их бесконачно; } @ -вебкит-кеифрамес промена боје {0% {бацкгроунд: # 33ФФФ3;} 25% {бацкгроунд: # 78281Ф;} 50% {бацкгроунд: # 117А65;} 75% {бацкгроунд: # ДЦ7633;} 100% {бацкгроунд: # 9Б59Б6;}} @кеифрамес промена боје {0% {бацкгроунд: # 33ФФФ3;} 25% {бацкгроунд: # 78281Ф;} 50% {бацкгроунд: # 117А65;} 75% {бацкгроунд: # ДЦ7633;} 100% {бацкгроунд: # 9Б59Б6;}} / стиле> / хеад> боди> / боди> / хтмл>

   • Имајте на уму да су два реда (@ -вебкит-кеифрамес и @кеифрамес имају исте вредности за боје позадине и проценте. Требало би да остане уједначено тако да искуство остане исто за све прегледаче.
   • Проценти (0%, 25%итд.) представљају укупно трајање анимације (60-их). Када се страница учита, боја позадине ће бити постављена на 0% и (# 33ФФФ3). Када се репродукује 25% или 60 секунди анимације, позадина ће прећи у # 78281Ф, и тако даље.
   • Можете прилагодити трајање и боје по жељи.