Содержание

• Шагать
• Метод 1 из 4: установка сплошного цвета фона
• Метод 2 из 4. Использование изображения в качестве фона
• Метод 3 из 4. Создайте градиентный фон.
• Метод 4 из 4. Установите цветную анимацию в качестве обоев.

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

Шагать

Метод 1 из 4: установка сплошного цвета фона

1. Откройте свой HTML-файл в своем любимом текстовом редакторе. Начиная с HTML5, HTML-атрибут bgcolor> больше не поддерживается. Цвет фона, как и все другие аспекты стиля вашей страницы, должен быть установлен с помощью CSS.
2. Добавить стиль> / стиль> отмечает ваш документ. Все данные о стилях для вашей страницы (включая цвет фона) должны быть закодированы в этих тегах. У тебя есть стиль> теги уже указаны, тогда вы можете просто перейти к этой части файла.

   ! DOCTYPE html> html> голова> стиль> / стиль> / голова> / html>

3. Введите элемент "body" внутри стиль> / стиль> теги. Все, что вы измените в элементе «body» в CSS, повлияет на всю страницу.

   ! DOCTYPE html> html> голова> стиль> тело {} / стиль> / голова> тело> / тело> / 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> голова> стиль> тело {цвет фона: # 93B874; } / стиль> / голова> тело> / тело> / html>

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

   ! DOCTYPE html> html> голова> стиль> тело {цвет фона: # 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> голова> стиль> / стиль> / голова> / html>

3. Введите элемент "body" внутри стиль> / стиль> теги. Все, что вы измените в элементе «body» в CSS, повлияет на всю страницу.

   ! DOCTYPE html> html> голова> стиль> тело {} / стиль> / голова> тело> / тело> / html>

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

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); цвет фона: # 93B874; } / стиль> / голова> тело> / тело> / html>

   • Хорошая идея - включить код фоновый цвет на всякий случай, если фоновое изображение не загрузится.
5. Слой нескольких изображений. Вы можете складывать несколько изображений друг на друга. Это может быть полезно, если у вас есть изображения с прозрачным фоном, которые дополняют друг друга при наложении.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); цвет фона: # 93B874; } / стиль> / голова> тело> / тело> / html>

   • Первое изображение сверху. Второе изображение ниже первого.

Метод 3 из 4. Создайте градиентный фон.

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

   фон: линейный градиент (направление / угол, цвет1, цвет2, цвет3 и т. д.);

3. Создайте вертикальный градиент. Если вы не укажете направление, цвет будет идти сверху вниз. В разных браузерах есть разные версии функции градиента, поэтому вам нужно будет добавить разные версии кода.

   ! DOCTYPE html> html> head> style> html {минимальная высота: 100%; / * Это необходимо для того, чтобы градиент охватил всю страницу * /} body {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+ * / background: linear-gradient (# 93B874, # C9DCB9); / * Синтаксис по умолчанию (должен быть последним) * / background-color: # 93B874; / * Рекомендуется установить цвет фона на случай, если градиент не загружается * /} / style> / head> body> / body> / html>

4. Создайте градиент с направлением. Добавление направления к градиенту позволяет настроить способ изменения цвета. Обратите внимание, что разные браузеры по-разному интерпретируют направления. Все они будут иметь одинаковый цветовой градиент.

   ! DOCTYPE html> html> head> style> html {минимальная высота: 100%; } тело {фон: -webkit-linear-gradient (слева, # 93B874, # C9DCB9); / * слева направо * / background: -o-linear-gradient (right, # 93B874, # C9DCB9); / * конец справа * / background: -moz-linear-gradient (right, # 93B874, # C9DCB9); / * конец справа * / background: linear-gradient (справа, # 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. Добавить недвижимость анимация элементу "body". Вам нужно будет добавить 2 разных свойства, поскольку для каждого браузера требуется свой код.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s бесконечность; анимация: смена цвета 60-х бесконечно; } / стиль> / голова> тело> / тело> / html>

   • -webkit-animation свойство требуется для браузеров на базе Chrome (Chrome, Opera, Safari). анимация является стандартом для всех остальных браузеров.
   • изменение цвета это то, что в этом примере называется анимацией.
   • 60-е годы - продолжительность (60 секунд) анимации / перехода. Обязательно установите это как для webkit, так и для синтаксиса по умолчанию.
   • бесконечный указывает, что анимация должна повторяться бесконечно. Если вы предпочитаете зацикливать цвета, а затем останавливаться на последнем цвете, вы можете пропустить эту часть.
3. Добавьте красок в свою анимацию. Теперь вы собираетесь использовать правило @keyframes, чтобы установить проходящие цвета фона, а также время, в течение которого каждый цвет может быть виден на странице. Опять же, вам придется добавить несколько кодировок для различных браузеров.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s бесконечность; анимация: смена цвета 60-х бесконечно; } @ -webkit-keyframes изменение цвета {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

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