От тази статия ще научите как да промените цвета на фона на уеб страницата, ако редактирате своя HTML код.

Стъпка

Метод 1 от 4:

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

един. Определете цвета на фона, който искате да използвате. В HTML цветовете се задават от кодове, които определят различни нюанси. Използвайте безплатните онлайн W3Schools HTML Color Picker Tool, за да намерите нуждите на желаните цветове:

Отиди на страница https: // W3Schools.Com / colors / colors_picker.ASP В уеб браузър.
Изберете основния цвят, който искате да използвате в раздела "Изберете цвят".
Изберете сянка от дясната страна на страницата.
Запишете кода, който ще бъде показан вдясно от избраната сянка.

2. Отворете HTML файл в текстов редактор. Не забравяйте, че в HTML5 атрибут Вече не се подкрепя. Следователно цветът на фона и други настройки на стила на страницата се настройват с CSS.

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

3. Добавете HTML заглавката към документа. Всички параметри на стила на страницата, включително цвета на фона, трябва да са между етикетите . T

4. Създайте празен низ между етикетите. На този ред, който трябва да бъде под етикета И над етикета , Ще въведете необходимата информация.

6. Добавете елемент "тяло". Въведете следния код между таговете . T

Тяло {}

Всичко, което ще бъде сключено в елемента "тялото" в CSS, ще повлияе на цялата страница.

Пропуснете тази стъпка, ако искате да създадете градиентен фон.

Метод 2 от 4:

Как да създадете монофен фон

един. Намерете HTML Header. Тя трябва да бъде в горната част на документа.

2. Добавяне на свойство "Цвят на фона" в елемента "тяло". Inter Цвят на фона: В къдрави скоби в елемента "тяло". Следният код трябва да се окаже:

Тяло {цвят на фона:}

Моля, обърнете внимание, че в този код е необходимо да използвате думата "цвят", а не "цвят".

3. Добавете желания фонов цвят към свойството "Цвят на фона". Вдясно от "Цвят на фона:" Въведете цифров код на избрания цвят и след това въведете точка и запетая (-). Например, за да направите фона на страниците Pink, напишете следния код:

Тяло {фон-цвят: # d24dff-}

4. Прегледайте информацията в рамките на етикета "стил". На този етап заглавката на вашия HTML документ трябва да изглежда така:

 {Цвят на фона: # D24DFF}

пет. Използвайте "цвят на фона", за да зададете цвета на фона на други елементи (заглавие, параграфи и други подобни). Например, за да зададете цвета на фона на главния заглавка (

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

 {Фонов цвят: # 93B874-} H1 {Фонов цвят: # 00B33C-} P {Фонов цвят: #FFFFFF) -} tЗаглавие
 На зелен фонПараграф
 на бял фон

Метод 3 от 4:

Как да създадете градиентен фон

един. Намерете HTML Header. Тя трябва да бъде в горната част на документа.

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

Фон: линейно-градиент (посока / ъгъл, цвят1, цвят2, цвят3 и т.н.)-

3. Създайте вертикален градиент. Ако не посочите посоката, градиентът ще премине отгоре надолу. За да създадете такъв градиент, въведете следния код между маркерите . T

HTML {min-height: 100% -} тяло {фон: -иблюда-линеен градиент (# 93B874, # c9dcb9) -background: -o-линеен градиент (# 93B874, # c9dcb9) -background: -Moz линеен -Графичен (# 93B874, # C9DCB9) -background: линейно-градиент (# 93B874, # C9DCB9) -Награден цвят: # 93B874-}

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

4. Създайте насочен градиент. Ако не искате градиентът да върви вертикално, посочете посоката на прехода на цветовете. За да направите това, въведете следния код между маркерите . T

HTML {min-height: 100% -} тяло {фон: -иблюда-линеен градиент (ляво, # 93B874, # c9dcb9) -background: -o-линеен градиент (надясно, # 93B874, # c9dcb9) -background: -Moz-линейно-градиент (дясно, # 93B874, # C9DCB9) -background: линеен градиент (надясно, # 93B874, # C9DCB9) -background-Цвят: # 93B874-} t

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

пет. Използвайте други свойства, за да зададете градиента. С него можете да направите повече, отколкото изглежда.

Например, след всеки цвят можете да въведете номер в проценти. Така че уточнявате кое пространство ще заема всеки цветен сегмент. Ето един пример с такива параметри:

Фон: линейно-градиент (# 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)- MOZ-линейно-градиент (надясно, # 93B874, # C9DCB9) -background: линейно-градиент (надясно, # 93B874, # C9DCB9) -background-Цвят: # 93B874-} t

Метод 4 от 4:

Как да създадете променящ се фон

един. Намерете HTML Header. Тя трябва да бъде в горната част на документа.

2. Добавете анимационния имот към елемента "тяло". Въведете следния код след "Body {" и към затварящата скоба:

-Webkit-анимация: Colorchange 60s Infinite-анимация: Colorchange 60s Infinite-

Горната линия на текста е предназначена за браузъри, базирани на хром, и долната линия на текста - за други браузъри.

3. Добавете цветове към имота "Анимация". Използвайте правилото "@KeyFrames", за да зададете фоновите цветове, които ще се променят циклично, както и времето, през което всеки цвят ще се покаже на страницата. Не забравяйте да въведете различен код за различни браузъри. Въведете следния код под затварящата скоба на тялото:

@ -Webkit-keyfraws colorchange {0% {фон: # 33FFFF3-} 25% {фон: # 117A65-} 75% {фон: # dc7633-} 100% {фон: # 9B59B6 -}} @ keyframames colorchange {0% {фон: # 33FFFF3-} 25% {фон: # 117A65-} 75% {фон: # dc7633-} 100% {фон: # 9B59B6 -}}

Моля, обърнете внимание, че две правила (@ -Webkit-keyframes и @Keyframes) имат същия цвят и интерес. Това се прави, за да може да се промени правилно фона на всеки браузър.

Интерес (0%, 25% И така нататък) показват дял от времето (60 SЧест. Когато страницата е заредена, нейният произход ще бъде цвят # 33FFF3. Когато 15 ° C (25% от 60 а), фонът ще бъде променен на цвят # 7821F и т.н.

Променете времето и цвета, така че да отговарят на желания резултат.

4. Виж код. Кодът за създаване на променящ се фон трябва да изглежда така:

 {-WebKit-Animation: Colorchange 60s Infinite-анимация: Colorchange 60s Infinite -} @ - webkit-keyfraws colorchange {0% {фон: # 33FFFF3-} 25% {фон: # 78281f-} 50% {фон: # 117A65- } 75% {фон: # dc7633-} 100% {фон: # 9B59B6 -}} @ keyframes colorchange {0% {фон: # 33FFF3-} 25% {фон: # 78281F-} 50% {фон: # 117A65- } 75% {фон: # dc7633-} 100% {фон: # 9B59B6-}}

Съвети

Ако искате да използвате основните цветове в HTML кода, можете да въведете имената на цветовете (без символ #), а не техните цифрови кодове. Например, за да създадете оранжев фон, въведете Фонов цвят: оранжево-.
Като уеб страница можете да инсталирате изображение.