Как задать цвет фона в HTML

Загрузить PDF

Из этой статьи вы узнаете, как изменить цвет фона веб-страницы, если отредактировать ее HTML-код.

Метод 1

Метод 1 из 4:

Как подготовиться к редактированию HTML-кода

Загрузить PDF

1
Определите цвет фона, который вы хотите использовать. В HTML цвета задаются кодами, которые определяют различные оттенки. Воспользуйтесь бесплатным онлайн-инструментом W3Schools HTML Color Picker, чтобы найти коды нужных цветов:
- Перейдите на страницу https://www.w3schools.com/colors/colors_picker.asp в веб-браузере компьютера.
- Выберите базовый цвет, который хотите использовать, в разделе «Pick a Color» (Выбрать цвет).
- Выберите оттенок в правой части страницы.
- Запишите код, который отобразится справа от выбранного оттенка.
2
Откройте HTML-файл в текстовом редакторе. Помните, что в HTML5 атрибут <bgcolor> больше не поддерживается. Поэтому цвет фона и другие параметры стиля страницы задаются с помощью CSS.^{[1]XИсточник информации}
- HTML-документ можно открыть в Notepad++ или Блокноте (Windows), а также в TextEdit или BBEdit (Mac).
3
Добавьте заголовок «html» в документ. Все параметры стиля страницы, включая цвет фона, должны находиться между тегами <style></style>:
```
<!DOCTYPE html><html><head><style></style> </head></html>
```
4
Создайте пустую строку между тегами «style». На этой строке, которая должна находиться под тегом <style> и над тегом </style>, вы введете необходимую информацию.

5

6
Добавьте элемент «body». Введите следующий код между тегами <style></style>:
```
body { }
```
- Все, что будет заключено внутри элемента «body» в CSS, повлияет на всю страницу.
- Пропустите этот шаг, если хотите создать градиентный фон.
Реклама

Метод 2

Метод 2 из 4:

Как создать однотонный фон

Загрузить PDF

Он должен быть в верхней части документа.
2
Добавьте свойство «background-color» в элемент «body». Введите background-color: в фигурных скобках внутри элемента «body». Должен получиться следующий код:
```
body {    background-color: }
```
- Обратите внимание, что в этом коде необходимо использовать слово «color», а не «colour».
3
Добавьте нужный цвет фона в свойство «background-color». Справа от «background-color:» введите числовой код выбранного цвета, а затем введите точку с запятой (;). Например, чтобы фон страницы сделать розовым, напишите следующий код:
```
body {    background-color: #d24dff;}
```
4
Просмотрите информацию внутри тегов «style». На этом этапе заголовок вашего HTML-документа должен выглядеть следующим образом:
```
<!DOCTYPE html><html><head><style>body {background-color: #d24dff}</style></head></html>
```
5
Используйте «background-color», чтобы задать цвет фона других элементов (заголовков, абзацев и тому подобных). Например, чтобы задать цвет фона основного заголовка (<h1>) или абзаца (<p>), напишите следующий код:^{[2]XИсточник информации}
```
<!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}h1 {    background-color: #00b33c;}p {    background-color: #FFFFFF);}</style></head><body><h1>Заголовок на зеленом фоне</h1><p>Абзац на белом фоне</p></body></html>
```
Реклама

Метод 3

Метод 3 из 4:

Как создать градиентный фон

Загрузить PDF

Он должен быть в верхней части документа.
2
Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода. ^{[3]XИсточник информации}
```
background: linear-gradient(направление/угол, цвет1, цвет2, цвет3 и так далее);
```
3
Создайте вертикальный градиент. Если не задать направление, градиент будет идти сверху вниз. Чтобы создать такой градиент, введите следующий код между тегами <style></style>:
```
html {    min-height: 100%; }body {    background: -webkit-linear-gradient(#216fdb, #C9DCB9);     background: -o-linear-gradient(#216fdb, #C9DCB9);     background: -moz-linear-gradient(#216fdb, #C9DCB9);     background: linear-gradient(#216fdb, #C9DCB9);     background-color: #216fdb; }
```
- В различных браузерах функции градиента реализованы по-разному, поэтому нужно добавить несколько версий кода.
4
Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами <style></style>:^{[4]XИсточник информации}
```
html {    min-height: 100%;}body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);     background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }
```
- Если хотите, переставьте слова «left» (влево) и «right» (вправо), чтобы поэкспериментировать с разными направлениями градиента.
5
Используйте другие свойства для настройки градиента. С ним можно сделать больше, чем кажется.
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
  background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
- Добавьте прозрачность к цвету. В этом случае он будет постепенно затухать. Чтобы добиться эффекта затухания, используйте один и тот же цвет. Чтобы задать цвет, понадобится функция rgba(). Последнее значение определит прозрачность: 0 — непрозрачный цвет и 1 — прозрачный цвет.
  background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

How.com.vn Русский: Step 6 Просмотрите код.

Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:

<!DOCTYPE html><html><head><style>html {    min-height: 100%;} body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);    background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }</style></head><body></body></html>

Метод 4

Метод 4 из 4:

Как создать меняющийся фон

Загрузить PDF

Он должен быть в верхней части документа.
2
Добавьте свойство «animation» в элемент «body». Введите следующий код после «body {» и до закрывающей фигурной скобки:^{[5]XИсточник информации}
```
    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;
```
- Верхняя строка текста предназначена для браузеров на основе Chromium, а нижняя строка текста — для других браузеров.
3
Добавьте цвета в свойство «animation». Воспользуйтесь правилом «@keyframes», чтобы задать цвета фона, которые будут циклически меняться, а также время, в течение которого каждый цвет будет отображаться на странице. Не забудьте ввести разный код для различных браузеров. Введите следующий код под закрывающей фигурной скобкой элемента «body»: ^{[6]XИсточник информации}
```
@-webkit-keyframes colorchange {     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;}}
```
- Обратите внимание, что два правила (@-webkit-keyframes и @keyframes) имеют одинаковые цвета фона и проценты. Это сделано для того, чтобы меняющийся фон правильно работал в любом браузере.
- Проценты (0%, 25% и так далее) обозначают долю от времени (60 с). Когда страница загрузится, ее фоном будет цвет #33FFF3. Когда пройдет 15 с (25% от 60 с), фон сменится на цвет # 7821F и так далее.
- Измените время и цвета, чтобы они соответствовали желаемому результату.

How.com.vn Русский: Step 4 Просмотрите код.

Код для создания меняющегося фона должен выглядеть следующим образом:

<!DOCTYPE html><html><head><style>body {    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;}@-webkit-keyframes colorchange {     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>

Советы

Если вы хотите использовать основные цвета в HTML-коде, можно вводить имена цветов (без символа #), а не их числовые коды. Например, чтобы создать оранжевый фон, введите background-color: orange;.
В качестве фона веб-страницы можно установить изображение.