Од овој напис ќе научите како да ја промените бојата на позадината на веб-страницата, ако го уредувате својот HTML код.

Чекори

Метод 1 од 4:

Како да се подготвите за уредување на HTML код

Еден. Определете ја бојата на позадината што сакате да ја користите. Во HTML, боите се поставени со кодови кои одредуваат разни нијанси. Користете ги бесплатните онлајн W3SCHOOLS HTML Color Picker алатка за да ги најдете потребите на саканите бои:

Оди на страна https: // w3schools.Com / бои / colors_picker.ASP Во веб прелистувач.
Изберете ја основната боја што сакате да ја користите во делот "Избери боја".
Изберете сенка на десната страна на страницата.
Запишете го кодот кој ќе биде прикажан десно од избраната сенка.

2. Отворете HTML-датотека во уредувач на текст. Запомнете дека во атрибутот HTML5 Повеќе не е поддржано. Затоа, бојата на позадината и поставките за стил на страница се поставени со користење на CSS.

HTML документот може да се отвори во Notepad ++ или Notepad (Windows), како и во Textedit или BBEDIT (MAC).

3. Додадете го HTML заглавието во документот. Сите параметри во стилот на страници, вклучувајќи ја бојата на позадината, мора да бидат помеѓу ознаките :

Четири. Направете празна низа помеѓу ознаките за стил. На оваа линија, која треба да биде под ознаката И над ознаката , Ќе ги внесете потребните информации.

6. Додадете елемент "тело". Внесете го следниов код помеѓу ознаките :

Тело {}

Сè што ќе биде склучено во внатрешноста на елементот "тело" во CSS ќе влијае на целата страница.

Прескокнете го овој чекор ако сакате да креирате градиент позадина.

Метод 2 од 4:

Како да креирате монофониска позадина

Еден. Најдете го HTML заглавието. Треба да биде на врвот на документот.

2. Додадете сопственост "боја-боја" во елементот "тело". Внесете Боја на позадина: Во кадрава загради во елементот "Тело". Следниот код треба да излезе:

Тело {боја-боја:}

Ве молиме имајте предвид дека во овој код е неопходно да се користи зборот "боја", а не "боја".

3. Додајте ја саканата боја на позадината на имотот "боја-боја". На десната страна на "боја-боја:" Внесете го нумеричкиот код на избраната боја, а потоа внесете ја точка-запирка (-). На пример, за да се направи позадината на страниците розова, напишете го следниов код:

Тело {backe-color: # d24dff-}

Четири. Прегледајте ги информациите во ознаката "Стил". Во оваа фаза, насловот на вашиот HTML документ треба да изгледа вака:

 {боја-боја: # d24dff}

Пет. Користете "боја-боја" за да ја поставите бојата на позадината на другите елементи (заглавија, ставови и слично). На пример, за да ја поставите бојата на позадината на главниот заглавие (

) или став (
), напишете го следниов код:

 {Боја на позадина: # 93b874-} H1 {Боја на позадина: # 00B33C-} P {Backgric-Color: #FFFFFF) -}Наслов
 На зелена позадинаСтав
 на бела позадина

Метод 3 од 4:

Како да креирате градиент позадина

Еден. Најдете го HTML заглавието. Треба да биде на врвот на документот.

2. Запомни главната синтакса на овој процес. За да креирате градиент, треба да знаете две количини: почетна точка / агол и голем број бои кои ќе се движат еден во друг. Можете да изберете неколку бои, така што тие ќе одат едни на други; исто така можете да ја наведете насоката или аголот на транзиција.

Позадина: линеарен градиент (насока / агол, боја1, боја2, боја3 и така натаму)-

3. Креирај вертикален градиент. Ако не ја наведете насоката, градиентот ќе оди од врвот до дното. За да креирате таков градиент, внесете го следниов код помеѓу ознаките :

Html {min-height: 100% -} тело {Позадина: -небит-линеарен градиент (# 93B874, # c9dcb9) -background: -o-линеарен градиент (# 93B874, # c9dcb9) -background: -moz-линеарни -Гобиенти (# 93B874, # c9dcb9) -background: линеарен градиент (# 93B874, # c9dcb9) -backround-боја: # 93b874-}

Во различни прелистувачи, градиентната функција се спроведува поинаку, така што треба да додадете повеќе верзии на кодот.

Четири. Креирај режија градиент. Ако не сакате градиентот да се движи вертикално, наведете насоката на транзицијата на бои. За да го направите ова, внесете го следниов код помеѓу ознаките :

HTML {min-height: 100% -} тело {Позадина: -небит-линеарен градиент (лево, # 93B874, # c9dcb9) -background: -o-линеарен градиент (десно, # 93b874, # c9dcb9) -background: -Моз-линеарен градиент (десно, # 93B874, # c9dcb9) -background: линеарен градиент (десно, # 93b874, # c9dcb9) -backround-боја: # 93b874-}

Ако сакате, запрете ги зборовите "лево" (лево) и "десно" (десно) за да експериментирате со различни насоки на градиентот.

Пет. Користете други својства за да го поставите градиентот. Со него можете да направите повеќе отколку што изгледа.

На пример, по секоја боја можете да внесете број во проценти. Значи, наведете кој простор ќе го окупира секој сегмент во боја. Еве еден пример код со такви параметри:

Позадина: линеарен градиент (# 93B874 10%, # C9DCB9 70%, # 000000 90%)-

Додадете транспарентност за бојата. Во овој случај, тој постепено ќе исчезнат. За да се постигне ефект на слабеење, користете иста боја. За да поставите боја, ќе ви треба функција RGBA (). Втората вредност ќе ја одреди транспарентноста: 0 - Непроѕирна боја и Еден - Транспарентна боја.

Позадина: линеарен градиент (десно, RGBA (147.184,116,0), RGBA (147.184,116,1))-

6. Погледнете го кодот. Кодексот за создавање на градиент на бои Како веб-страница позадина ќе изгледа нешто вака:

 {min-height: 100% -} тело {Позадина: -небит-линеарен градиент (лево, # 93B874, # c9dcb9) -background: -o-линеарен градиент (десно, # 93b874, # c9dcb9) -background: - Moz-Linear-градиент (десно, # 93B874, # C9DCB9) -Appround: линеарен градиент (десно, # 93B874, # C9DCB9) -backround-боја: # 93B874-}

Метод 4 од 4:

Како да креирате промена на позадината

Еден. Најдете го HTML заглавието. Треба да биде на врвот на документот.

2. Додадете сопственост на анимација на елементот "тело". Внесете го следниов код по "тело {" и до затворачката заграда:

-Webkit-анимација: боја 60s бесконечна-анимација: боја 60s бесконечен-

Врвната линија на текстот е наменета за прелистувачи базирани на хром, и долната линија на текстот - за други прелистувачи.

3. Додадете бои на имотот "анимација". Користете го правилото "@keyframes" за да ги поставите боите на позадината што ќе се смени циклично, како и времето во кое секоја боја ќе биде прикажана на страницата. Не заборавајте да внесете друг код за различни прелистувачи. Внесете го следниов код под затворање на постарите на елементот на телото:

@ 0% {0% {0% {0% {0% {0% {0% {0% {0% {Позадина: # 78281F-} 50% {Позадина: # 117A65-} 75% {Позадина: # DC7633-} 100% {Позадина: # 9b59b6 -}} @ Keyframes Colorchange {0% {0% {0% {0% {0% {0% {0% {0% {0% {> Позадина: # 78281F-} 50% {Позадина: # 117A65-} 75% {Позадина: # DC7633-} 100% {Позадина: # 9B59B6 -}}

Ве молиме забележете дека два правила (@-Webkit-Keyframes и @Keyframes) ги имаат истата боја позадина и интерес. Ова е направено со цел да се менува позадината правилно работено во било кој прелистувач.

Камата (0%, 25% И така натаму) укажуваат на дел од времето (60 с). Кога страната е натоварена, неговата позадина ќе биде боја # 33fff3. Кога 15 ° C (25% од 60 секунди), позадината ќе се промени во боја # 7821F итн.

Промена на времето и бојата, така што тие ќе одговараат на посакуваниот резултат.

Четири. Погледнете го кодот. Кодексот за создавање на промена на позадината треба да изгледа вака:

 {-Небит-анимација: 60-тина бесконечна анимација: 60-тина {0% {0% {0% {0% {0% {Позадина: # 33ffff3-} 25% {Позадина: # 78281F-} 50% {Позадина: # 117A65- } 75% {Позадина: # DC7633-} 100% {Позадина: # 9B59B6 -}} @ Keyframes Colorchange {0% {Позадина: # 33fff3-} 25% {Позадина: # 78281F-} 50% {Позадина: # 117A65- } 75% {Позадина: # DC7633-} 100% {Позадина: # 9B59B6-}}

Совети

Ако сакате да ги користите главните бои во HTML кодот, можете да ги внесете имињата на боите (без симбол #), а не нивните нумерички кодови. На пример, за да креирате портокалова позадина, внесете Позадина-боја: портокал-.
Како веб-страница, можете да инсталирате слика.