Задаволены

• Крок
• Спосаб 1 з 4: Усталёўка суцэльнага колеру фону
• Спосаб 2 з 4: Выкарыстанне малюнка ў якасці фону
• Спосаб 3 з 4: Стварыце градыентны фон
• Спосаб 4 з 4: У якасці шпалер усталюйце каляровую анімацыю

Каб мець магчымасць усталяваць фон вэб-старонкі ў HTML, вам проста трэба ўнесці невялікія змены ў элемент "body" у стыль> / стыль> тэгі. Крокі залежаць ад таго, як вы хочаце, каб вашы шпалеры выглядалі. Даведайцеся, як задаць фон вашага сайта аднатонным, малюнкам, градыентам альбо каляровай анімацыяй.

Крок

Спосаб 1 з 4: Усталёўка суцэльнага колеру фону

1. Адкрыйце файл HTML у вашым любімым тэкставым рэдактары. Пачынаючы з HTML5, атрыбут HTML bgcolor> больш не падтрымліваецца. Колер фону, як і ўсе астатнія аспекты вашай старонкі, павінен быць усталяваны ў CSS.
2. Дадайце стыль> / стыль> пазначае ваш дакумент. Усе дадзеныя стылю вашай старонкі (уключаючы колер фону) павінны быць закадзіраваны ў гэтых тэгах. У вас ёсць стыль> тэгі ўжо пазначаны, тады вы можаце проста пракруціць да гэтай часткі файла.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Увядзіце элемент "body" унутры стыль> / стыль> тэгі. Усё, што вы зменіце на элемент "body" у CSS, адаб'ецца на ўсёй старонцы.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Дадайце ўласцівасць "background-color" да элемента "body". У гэтым кантэксце будзе працаваць толькі адно напісанне "колер" (не: колер).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Размясціце патрэбны колер фону ззаду "background-color". Цяпер вы можаце пазначыць назву колеру (зялёны, блакітны, рэді г.д.), выкарыстоўвайце шаснаццатковыя (шаснаццатковыя) коды (напр. #000000 для чорнага, # ff0000 для чырвонага і г.д.) альбо набраўшы значэнне RGB для колеру (напрыклад rgb (255255,0) для жоўтага). Ніжэй прыведзены прыклад з шаснаццаткавымі кодамі, робячы фон такім жа, як банер wikiHow:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Белы: #FFFFFF
   • Светла-ружовы: # FFCCE6
   • Спаленая Сіена: #993300
   • Індыга - # 4B0082
   • Фіялка - # EE82EE
   • Праверце выбар колеру HTML w3schools.com, каб знайсці шаснаццаткавыя коды любога колеру, які вы хочаце.
6. Выкарыстоўвайце "колер фону", каб прымяніць колер фону да іншых элементаў. Падобна таму, як вы ўсталёўваеце элемент body, вы можаце выкарыстоўваць колер фону, каб усталяваць фон іншых элементаў. Проста змесціце гэтыя элементы ў стыль> / стыль> з уласцівасцю колеру фону.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {колер фону: аранжавы; } p {колер фону: rgb (255,0,0); } / style> / head> body> h1> Гэты загаловак атрымлівае аранжавы фон / h1> p> Гэты абзац атрымлівае чырвоны фон / p> / body> / html>

Спосаб 2 з 4: Выкарыстанне малюнка ў якасці фону

1. Адкрыйце файл HTML у тэкставым рэдактары. Шмат хто аддае перавагу выкарыстоўваць малюнак у якасці фону для свайго сайта. З дапамогай гэтага вы можаце ўсталяваць узор, фактуру, фатаграфію альбо любы іншы малюнак у якасці фону. З HTML5 усе фоны павінны быць усталяваны CSS (каскадныя табліцы стыляў) у межах стыль> / стыль> тэгі.
2. Дадайце стыль> / стыль> тэгі да вашага файла HTML. Усе дадзеныя пра стыль вашай старонкі (уключаючы колер фону) павінны быць указаны ў гэтых тэгах. У вас ужо ёсць стыль> тэгі, пракруціць да гэтай часткі файла.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Увядзіце элемент "body" унутры стыль> / стыль> тэгі. Усё, што вы зменіце на элемент "body" у CSS, адаб'ецца на ўсёй старонцы.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Дадайце ўласцівасць "background-image" да элемента "body". Пры даданні гэтай уласцівасці вам спатрэбіцца імя файла выявы. Пераканайцеся, што выява захавана ў той самай тэчцы, што і файл html (альбо дадайце поўны шлях да файла на вэб-сервер).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); колер фону: # 93B874; } / style> / head> body> / body> / html>

   • Карысна ўключыць код фон-колер на выпадак, калі фонавы малюнак не загрузіцца.
5. Шар некалькіх малюнкаў. Вы можаце складаць некалькі малюнкаў адзін на аднаго. Гэта можа быць карысна, калі ў вас ёсць выявы з празрыстым фонам, якія дапаўняюць адзін аднаго пры накладанні.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); колер фону: # 93B874; } / style> / head> body> / body> / html>

   • Першая выява зверху. Другі малюнак знаходзіцца пад першым.

Спосаб 3 з 4: Стварыце градыентны фон

1. Выкарыстоўвайце CSS для стварэння градыентнага фону. Калі вы шукаеце нешта стылізаванае, чым аднатоннае, але не такое занятае, як каляровая анімацыя, паспрабуйце градыентны фон. Градыенты - гэта колеры, якія змяняюцца на іншыя роўнасці. Вы можаце выкарыстоўваць CSS для стварэння і налады градыенту. Перш чым пачаць ствараць каляровы градыент, вы павінны атрымаць дастатковыя веды пра асновы фарматавання вэб-старонкі з дапамогай CSS.
2. Зразумець стандартны сінтаксіс. Пры стварэнні градыенту вам спатрэбіцца два звесткі: зыходная кропка і пачатковы кут, а таксама колеры, паміж якімі будзе адбывацца пераход. Вы можаце выбраць некалькі кветак, якія перакрываюцца, і вы можаце задаць кірунак альбо кут градыенту.

   фон: лінейна-градыентны (кірунак / кут, колер1, колер2, колер3 і г.д.);

3. Стварыце вертыкальны градыент. Калі вы не пазначыце кірунак, колер будзе праходзіць зверху ўніз. Розныя аглядальнікі маюць розныя версіі функцыі градыенту, таму вам трэба будзе дадаць розныя версіі кода.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Гэта неабходна для таго, каб градыент ахопліваў усю старонку * /} цела {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / фон: -o-лінейны градыент (# 93B874, # C9DCB9); / * Opera 11.1+ * / фон: -moz-лінейны-градыент (# 93B874, # C9DCB9); / * Firefox 3.6+ * / фон: лінейны градыент (# 93B874, # C9DCB9); / * Сінтаксіс па змаўчанні (павінен быць апошнім) * / background-color: # 93B874; / * Варта ўсталяваць колер фону, калі градыент не загружаецца * /} / style> / head> body> / body> / html>

4. Стварыце градыент з напрамкам. Даданне кірунку да градыенту дазваляе наладзіць спосаб змены колеру. Звярніце ўвагу, што розныя аглядальнікі будуць па-рознаму інтэрпрэтаваць напрамкі. Усе яны будуць паказваць аднолькавы колеравы градыент.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } цела {фон: -webkit-лінейны-градыент (злева, # 93B874, # C9DCB9); / * злева направа * / фон: -o-лінейны градыент (справа, # 93B874, # C9DCB9); / * канец справа * / фон: -moz-лінейны-градыент (справа, # 93B874, # C9DCB9); / * канец справа * / фон: лінейны градыент (направа, # 93B874, # C9DCB9); / * перамяшчаецца ў правы бок * / background-color: # 93B874; / * нядрэнна ўсталяваць колер фону, у выпадку, калі градыент не загрузіцца * /} / style> / head> body> / body> / html>

5. Выкарыстоўвайце іншыя ўласцівасці, каб наладзіць градыент. З градыентамі можна зрабіць значна больш.
   • Напрыклад, вы можаце не толькі выкарыстоўваць больш за два колеры, але і размясціць адсотак за кожным. З дапамогай гэтага вы можаце паказаць, колькі месца атрымае кожны каляровы сегмент.

     фон: лінейны градыент (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Дадайце празрыстасці колерам. З дапамогай гэтага вы можаце знікаць колеры. Выкарыстоўвайце адзін і той жа колер, каб знікаць з колеру на нішто. Вам спадабаецца гэтая функцыя rgba () неабходна выкарыстоўваць для пазначэння колеру. Канчатковае значэнне вызначае ступень празрыстасці: 0 для непразрыстых і 1 для празрыстага.

     фон: лінейны градыент (направа, rgba (147,184,116.0), rgba (147,184,116.1));

Спосаб 4 з 4: У якасці шпалер усталюйце каляровую анімацыю

1. Перайдзіце да стыль> у вашым HTML-кодзе. Калі вы знайшлі аднатонны колер фону, але не, паэксперыментуйце са зменай каляровага фону. З HTML 5 колеры фону павінны вызначацца з дапамогай CSS (каскадныя табліцы стыляў). Калі вы ніколі не ўсталёўвалі колер фону з дапамогай CSS, прачытайце раздзел пра ўсталёўку суцэльнага колеру фону, перш чым паспрабаваць гэты метад.
2. Дадайце ўласцівасць анімацыя да элемента "цела". Вам трэба будзе дадаць 2 розныя ўласцівасці, бо кожны аглядальнік патрабуе іншы код.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; анімацыя: бясконцая змена колеру 60-х; } / style> / head> body> / body> / html>

   • -webkit-анімацыя ўласцівасць патрабуецца для браўзэраў на базе Chrome (Chrome, Opera, Safari). анімацыя з'яўляецца стандартам для ўсіх астатніх браўзэраў.
   • колераабмен гэта тое, што ў гэтым прыкладзе называецца анімацыяй.
   • 60-я - працягласць (60 секунд) анімацыі / пераходу. Пераканайцеся, што ўсталявалі гэта як для webkit, так і для сінтаксісу па змаўчанні.
   • бясконцы азначае, што анімацыя павінна паўтарацца бясконца доўга. Калі вы аддаеце перавагу замыкаць колеры, а потым спыняцца на апошнім колеры, вы можаце апусціць гэтую частку.
3. Дадайце колеры ў анімацыю. Цяпер вы збіраецеся выкарыстоўваць правіла @keyframes, каб усталяваць колер фону, які трэба прайсці, а таксама тое, як доўга кожны колер можна бачыць на старонцы. Зноў жа, вам трэба будзе дадаць некалькі кадоў для розных браўзэраў.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; анімацыя: колераабмен 60-х гадоў бясконцы; } @ -webkit-keyframes змена колеру {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes змена колеру {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

   • Звярніце ўвагу, што два радкі (@ -webkit-ключавыя кадры і @keyframes маюць аднолькавыя значэнні для колераў фону і працэнтаў. Ён павінен заставацца адзіным, каб досвед працы заставаўся аднолькавым для ўсіх аглядальнікаў.
   • Працэнты (0%, 25%і г.д.) прадстаўляюць агульную працягласць анімацыі (60-я). Калі старонка загружаецца, для фону будзе прызначаны колер 0% і (# 33FFF3). Калі прайграецца 25% альбо 60 секунд анімацыі, фон пераходзіць у # 78281F, і гэтак далей.
   • Вы можаце наладзіць працягласць і колеры па жаданні.