Как поменять цвет фона в html css
Перейти к содержимому

Как поменять цвет фона в html css

  • автор:

CSS background color

Нередко требуется сделать фоновый цвет для какого-то элемента веб-страницы. Например, если необходимо выделить блок с важной информацией. За это отвечает свойство css «background-color». По умолчанию его значение выставлено на «transparent», что означает «прозрачный».

Синтаксис свойства background-color

Синтаксис очень прост. Сначала пишется свойство background-color, после чего ставится двоеточие и пишется цвет. То есть, синтаксис стандартный для множества подобных элементов.
Предположим, у нас есть класс заголовков «attention». В таком случае, чтобы сделать все заголовки этого типа с красным фоном, необходимо написать такой код.

.attention < background-color: red; /* Цвет фона под заголовком */ >

Вместо цвета можно также указывать значения «transparent», чтобы сделать фон прозрачным и «inherit», чтобы взять то же значение, что и у родительского элемента.

Цветовые модели

Цвет в CSS можно задавать несколькими способами:

  1. Шестнадцатеричным числом. Самый популярный способ. Чтобы записать значение в шестнадцатеричной системе счисления необходимо к привычному числовому ряду 0-9 добавить пять первых латинских букв. Самое маленькое число – 0, а самое большое – f. Схема записи цвета в шестнадцатеричном формате: знак решетки #, степень выраженности красного (от 00 до ff), зеленого и синего цвета. Например, тот же красный цвет фона в шестнадцатеричном формате был бы записан как background-color: #FF0000.
  2. По цветовой модели RGB. В принципе, то же самое, что и прошлый вариант, просто запись несколько иная. Здесь также цвет получается путем смешивания красного, зеленого и синего цветов в определенных пропорциях (от 0 до 255). Но записывается он несколько по-иному: rgb(0, 255, 0); На первом месте в скобках находится красный, на втором – зеленый, а на третьем – синий цвет. В этом примере фон будет зеленым. Черный цвет обозначается нулями, а белый – цифрами 255.
  3. RGBA. То же RGB, но с альфа-каналом. Проще говоря, с эффектом прозрачности. Если интенсивность цвета колеблется в пределах от 0 до 255, то альфа-канал – от 0 до 1. Если записать свойство background-color: rgba(0, 255, 0,0), эффект будет аналогичный значению «transparent». Значение 1 аналогично такому же RGB, только без альфа-канала.
  4. HSL. Гибкая цветовая модель, которая включает не только тон, но и насыщенность с яркостью. Записывается он так же, как и RGB: hsl(165, 100%, 50%). Первое значение – это цветовой тон, обозначаемый в градусах. Второе – насыщенность, а третье – яркость.
  5. HSLA. То же, что и HSL, только с альфа-каналом.

Также можно использовать стандартные цветовые обозначения: red, green, blue, yellow и другие.

Пример кода, демонстрирующий разные цветовые модели

  background-color    

Этот код окрашивает разные заголовки с различными id в соответствующие цвета. Содержимое каждого тега H1 указывает на способ представления цвета, которым создавался фон. В комментариях (текст между /* и */) описывается то, что делает каждый код.
В результате получается такая страничка:

Работа с цветом фона в библиотеке jQuery

jQuery – популярная Javascript-библиотека. Может появиться ситуация, когда нужно поменять цвет фона после выполненных посетителем сайта действий. Для этого нужно воспользоваться методом .css(). В скобках нужно указать желаемое свойство, в нашем случае – background-color. Только писать нужно без дефиса – .css(‘backgroundColor’). В принципе, можно указывать свойство с ним, но это не так удобно, да и JS разработчику привычнее записывать его разным регистром.
Второй параметр в скобках – значение свойства. Например, .css(‘backgroundColor’,’blue’).

Использование свойства с разными элементами

Свойство css background-color можно использовать с разными элементами веб-страницы. Надо его прописывать в селектор того объекта, фон которого необходимо определить. Как и любое другое свойство, его можно применять ко всем аналогичным элементам на странице (например, заголовкам), конкретному классу объектов (селектор .classname) или конкретному объекту (#id).
Например, такой код присваивает красный фон строке таблицы.

Чтобы применить css свойство к SVG-документу, необходимо прописать соответствующий тег в селекторе, а потом указать в фигурных скобках необходимое свойство. Принцип не отличается от CSS в HTML. Так, чтобы настроить цвет фона в SVG, необходимо прописать такой код.

Также можно настроить цвет фона блочного элемента. Например, контейнера

. Код будет такой для любого элемента на странице.

Анимация цвета фона

Анимация цвета фона в css реализуется стандартно – через @keyframes, после чего в фигурных скобках указываются точки остановки. Например, можно сделать изменение цвета фона при наведении мышью на объект.
Код будет следующий (пояснения приводятся в комментариях).

#hex:hover < /* здесь прописывается появление анимации при наведении мыши */ animation-name: an; /* Имя анимации */ animation-duration: 1s; /* длительность анимации */ animation-iteration-count: infinite; /* количество повторений анимации, в нашем случае - бесконечно */ >@keyframes an < 0%/* Цвет в начале анимации */ 50% /* Цвет посередине анимации */ 100% /* Цвет в конце анимации */ >

как поменть фон в header

в уроке испльзыется устаревшая версия шаблона с startbootstrap.com, в уроке цвет фона в header меняется просто , но в новой версси шаблона файл css выглядит совсем по другому и когда я пытаюсь изменить цвет фона в header , то меняется и цывет фона в About Section ,т.к. у них присвоен один класс bg-primary который задает цвет

Павел Егоров
3 years ago

ну можно задать отдельный класс для about section и прописать его, сложностей не вижу

student_8vsRa_2i
3 years ago

Благодарю за ответ, я сделал так;

header.bg-primary background-color: black /*#1abc9c !important*/;
>

section.bg-primary background-color: #1abc9c !important;
>

это будет правильно?

Павел Егоров
3 years ago

2 ответов

JavaScript — полный курс с нуля до результата!

Полный курс Python для начинающих – с нуля до специалиста

Photoshop для начинающих Веб-дизайнеров

Adobe Illustrator с нуля – основы дизайна для начинающих

Программирование на Java с нуля

React JS для начинающих + Redux

Django 3 — Full Stack разработка веб сайтов на Python

WordPress – с нуля до Профи!

Основы HTML/CSS — верстка сайтов с нуля

WordPress – Быстрый старт!

Шаблонизатор Pug/jade — современный ускоритель для HTML

ВЕБ-разработчик — с нуля до результата!

Посадка верстки и создание тем на CMS WordPress

Настройка рекламы Яндекс Директ — продвижение сайтов

Настройка рекламы Google — продвижение сайтов

Настройка таргетированной рекламы и продвижение ВКонтакте

Настройка рекламы и продвижение Facebook+Instagram

МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram

Полный курс Android + Java для начинающих

Kotlin — Быстрый старт!

Программирование на C# – от новичка до специалиста

Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript

SQL и PostgreSQL для начинающих

Создание административной панели на React JS + PHP

Практический JavaScript — продвинутый уровень

GIT. Управление версиями для разработчиков

Программирование на Java с нуля — Уровень 2 + 10 собеседований

Полный курс Python – продвинутый уровень + SQL

Figma для Веб дизайнера — с нуля до профессионала

React с нуля для начинающих + 3 проекта в портфолио!

Веб Дизайн в Figma. Основы Ui Ux дизайна на практике

Алгоритмы и структуры данных от А до Я

Adobe Illustrator с нуля – Уровень 2 – продвинутая практика

Android разработчик – профессиональный уровень (Kotlin)

Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit

Шаблоны проектирования на Python

Цвет фона в HTML

Давайте начнем с рассмотрения того, как сделать нашу первую HTML- страницу такой, какой мы хотим ее видеть.

В HTML мы можем установить цвет фона, используя относительный атрибут тега body. Итак:

Палитра цвета

В данной таблица цветов вы можете переводить выбранный вами цвет в RGB код (для создания цвета в графическом редакторе) и HEX код (для обозначения цвета в HTML).

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета доступны с использованием соответствующих ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

Однако не рекомендуется вводить цветовую нотацию, ссылаясь на этот тип синтаксиса, поскольку мы не можем точно знать, какой цветовой оттенок соответствует компьютеру пользователя. Во многих случаях предпочтительнее использовать соответствующую шестнадцатеричную цветовую кодировку, которая позволяет нам — среди прочего — также выбирать нестандартные цветовые тона. С шестнадцатеричной записью наш пример становится:

HTML таблица цветов

Вы можете скачать палитру цветов которая сожержит более 100 цветов с названиями и кодами
Скачать палитру цветов с кодами

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: “darkblue”, “lightblue” ):

цвет ключевое слово шестнадцатеричное обозначение
оранжевый orange #ffa500
синий blue #0000ff
белый white #ffffff
желтый yellow #ffff00
серый gray #808080
коричневый brown #a52a2a
черный black #000000
красный red #ff0000
зеленый green #008000
фиолетовый violet #ee82ee

Кстати цвет фона ячейки в таблице задан вот таким образом

#ffffff

Количество доступных цветов зависит от видеокарты. Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, которое обеспечивает миллионы цветов.

Цвет фона и настройки экрана

Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.

Однако следует сказать, что подавляющее большинство компьютеров настроено отображать как минимум тысячи цветов, поэтому использование «безопасной веб-палитры» уже не так строго необходимо (это было в первые годы существования Интернета).

Не меняется цвет фона

Author24 — интернет-сервис помощи студентам

почему не минчется цвет фона,все делаю как написано на сайтах,но что тут не так.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
 "http://www.w3.org/TR/html4/loose.dtd"> html> head>title>в кус!/title> body < background-color:#66c66 >/style> /head> body>p align=center>сайтостроение/p> br>br> div class="navi"> ul class="navi"> li>a href="#">русский/a>/li> li>a href="ind2.html">что нужно для создания страницы/a>li> li>a href="index.html">бмв/a>/li> li>a href="index2.html">ниссан/a>/li> /ul>/div> /body> /html>

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Не меняется цвет фона header
Вообщем, пытаюсь поменять цвет шапки сайта (только начал кодить на html), а оно не меняется, код.

При уменьшении масштаба меняется цвет фона
При уменьшении масштаба меняется цвет фона. Подскажите пути решения пожалуйста. .

После обновления страницы меняется цвет фона
Изменил цвет background с черного на белый, сохранил изменения. Но когда захожу на сайт то цвет.

Цвет фона
Еще такой вопрос, при задании body, мы указываем цвет фона, к примеру: <body leftmargin="0".

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *