Съдържание

• Стъпвам
• Метод 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 (255,255,0) за жълто). По-долу е даден пример с шестнадесетични кодове, което прави фона същият като банера wikiHow:

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

   • Бяло: #FFFFFF
   • Светло розово: # FFCCE6
   • Изгорена Сиена: #993300
   • Индиго - # 4B0082
   • Виолетово - # EE82EE
   • Разгледайте w3schools.com HTML Color Picker, за да намерите шестнадесетичните кодове на всеки цвят, който искате.
6. Използвайте "background-color", за да приложите цветовете на фона към други елементи. Точно както сте задали елемента body, можете да използвате background-color, за да зададете фона на други елементи. Просто поставете тези елементи в стил> / стил> със свойството background-color.

   ! 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%; } body {background: -webkit-linear-gradient (вляво, # 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 (Cascading Style Sheets). Ако никога не сте задавали цвят на фона с CSS, прочетете раздела за задаване на плътен цвят на фона, преди да опитате този метод.
2. Добавете имота анимация към елемента "тяло". Ще трябва да добавите 2 различни свойства, тъй като всеки браузър изисква различен код.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; анимация: colorchange 60s infinite; } / 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; анимация: colorchange 60s infinite; } @ -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, и така нататък.
   • Можете да регулирате продължителността и цветовете по желание.