Зміст

• Крок
• Спосіб 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
   • Перегляньте w3schools.com HTML Color Picker, щоб знайти шістнадцяткові коди будь-якого кольору, який ви хочете.
6. Використовуйте "background-color", щоб застосувати кольори фону до інших елементів. Так само, як ви встановлюєте елемент body, ви можете використовувати колір фону для встановлення фонів інших елементів. Просто розмістіть ці елементи всередині стиль> / стиль> з властивістю background-color.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {фон-колір: оранжевий; } p {background-color: 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+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 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%; } тіло {background: -webkit-linear-gradient (ліворуч, # 93B874, # C9DCB9); / * зліва направо * / фон: -o-лінійний градієнт (праворуч, # 93B874, # C9DCB9); / * кінець праворуч * / background: -moz-linear-gradient (праворуч, # 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 секунд) анімації / переходу. Обов’язково встановіть це як для веб-набору, так і для синтаксису за замовчуванням.
   • нескінченний вказує на те, що анімація повинна повторюватися нескінченно довго. Якщо ви віддаєте перевагу петлі кольорів, а потім зупинилися на останньому кольорі, цю частину можна опустити.
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, і так далі.
   • Ви можете налаштувати тривалість та кольори за бажанням.