CSS background color
Нередко требуется сделать фоновый цвет для какого-то элемента веб-страницы. Например, если необходимо выделить блок с важной информацией. За это отвечает свойство css «background-color». По умолчанию его значение выставлено на «transparent», что означает «прозрачный».
Синтаксис свойства background-color
Синтаксис очень прост. Сначала пишется свойство background-color, после чего ставится двоеточие и пишется цвет. То есть, синтаксис стандартный для множества подобных элементов.
Предположим, у нас есть класс заголовков «attention». В таком случае, чтобы сделать все заголовки этого типа с красным фоном, необходимо написать такой код.
.attention{ background-color: red; /* Цвет фона под заголовком */ }
Вместо цвета можно также указывать значения «transparent», чтобы сделать фон прозрачным и «inherit», чтобы взять то же значение, что и у родительского элемента.
Цветовые модели
Цвет в CSS можно задавать несколькими способами:
- Шестнадцатеричным числом. Самый популярный способ. Чтобы записать значение в шестнадцатеричной системе счисления необходимо к привычному числовому ряду 0-9 добавить пять первых латинских букв. Самое маленькое число – 0, а самое большое – f. Схема записи цвета в шестнадцатеричном формате: знак решетки #, степень выраженности красного (от 00 до ff), зеленого и синего цвета. Например, тот же красный цвет фона в шестнадцатеричном формате был бы записан как background-color: #FF0000.
- По цветовой модели RGB. В принципе, то же самое, что и прошлый вариант, просто запись несколько иная. Здесь также цвет получается путем смешивания красного, зеленого и синего цветов в определенных пропорциях (от 0 до 255). Но записывается он несколько по-иному: rgb(0, 255, 0); На первом месте в скобках находится красный, на втором – зеленый, а на третьем – синий цвет. В этом примере фон будет зеленым. Черный цвет обозначается нулями, а белый – цифрами 255.
- RGBA. То же RGB, но с альфа-каналом. Проще говоря, с эффектом прозрачности. Если интенсивность цвета колеблется в пределах от 0 до 255, то альфа-канал – от 0 до 1. Если записать свойство background-color: rgba(0, 255, 0,0), эффект будет аналогичный значению «transparent». Значение 1 аналогично такому же RGB, только без альфа-канала.
- HSL. Гибкая цветовая модель, которая включает не только тон, но и насыщенность с яркостью. Записывается он так же, как и RGB: hsl(165, 100%, 50%). Первое значение – это цветовой тон, обозначаемый в градусах. Второе – насыщенность, а третье – яркость.
- HSLA. То же, что и HSL, только с альфа-каналом.
Также можно использовать стандартные цветовые обозначения: red, green, blue, yellow и другие.
Пример кода, демонстрирующий разные цветовые модели
<html> <head> <title>background-color</title> <style> #hex { background-color: #0000FF; /* Синий цвет в шестнадцатеричной */ } #rgb { background-color: RGB(255, 0, 0); /* Красный RGB */ } #rgba { background-color: RGBA(255, 0, 0, 0.3); /* Красный RGBA с прозрачностью 30% */ } #hsl { background-color: HSL(250,100%,50%); /* hsl: c параметрами (250,100%,50%) */ } #hsla { background-color: HSLA(250,100%,50%,0.3); /* Цвет в системе hsla: c параметрами (250,100%,50%,0.3) */ } #yellow2 { background-color: yellow; /* Желтый цвет фона */ } </style> </head> <body> <h1 id="hex">Цвет в шестнадцатеричной системе представления цвета синий</h1> <h1 id="rgb">Цвет в системе rgb: красный</h1> <h1 id="rgba">Цвет в системе rgba: красный, с альфа-каналом 0.3</h1> <h1 id="hsl">Цвет в системе hsl: c параметрами (250,100%,50%)</h1> <h1 id="hsla">Цвет в системе hsla: c параметрами (250,100%,50%,0.3)</h1> <h1 id="yellow2">Желтый цвет фона</h1> </body> </html>
Этот код окрашивает разные заголовки с различными id в соответствующие цвета. Содержимое каждого тега H1 указывает на способ представления цвета, которым создавался фон. В комментариях (текст между /* и */) описывается то, что делает каждый код.
В результате получается такая страничка:
Работа с цветом фона в библиотеке jQuery
jQuery – популярная Javascript-библиотека. Может появиться ситуация, когда нужно поменять цвет фона после выполненных посетителем сайта действий. Для этого нужно воспользоваться методом .css(). В скобках нужно указать желаемое свойство, в нашем случае – background-color. Только писать нужно без дефиса – .css(‘backgroundColor’). В принципе, можно указывать свойство с ним, но это не так удобно, да и JS разработчику привычнее записывать его разным регистром.
Второй параметр в скобках – значение свойства. Например, .css(‘backgroundColor’,’blue’).
Использование свойства с разными элементами
Свойство css background-color можно использовать с разными элементами веб-страницы. Надо его прописывать в селектор того объекта, фон которого необходимо определить. Как и любое другое свойство, его можно применять ко всем аналогичным элементам на странице (например, заголовкам), конкретному классу объектов (селектор .classname) или конкретному объекту (#id).
Например, такой код присваивает красный фон строке таблицы.
tr { background-color: RGB(255, 0, 0); }
Чтобы применить css свойство к SVG-документу, необходимо прописать соответствующий тег в селекторе, а потом указать в фигурных скобках необходимое свойство. Принцип не отличается от CSS в HTML. Так, чтобы настроить цвет фона в SVG, необходимо прописать такой код.
svg { background-color: beige; }
Также можно настроить цвет фона блочного элемента. Например, контейнера
div{ background-color: beige; }
Анимация цвета фона
Анимация цвета фона в css реализуется стандартно – через @keyframes, после чего в фигурных скобках указываются точки остановки. Например, можно сделать изменение цвета фона при наведении мышью на объект.
Код будет следующий (пояснения приводятся в комментариях).
#hex:hover{ /* здесь прописывается появление анимации при наведении мыши */ animation-name: an; /* Имя анимации */ animation-duration: 1s; /* длительность анимации */ animation-iteration-count: infinite; /* количество повторений анимации, в нашем случае - бесконечно */ } @keyframes an{ 0%{background-color: #ff375a} /* Цвет в начале анимации */ 50%{background-color: red} /* Цвет посередине анимации */ 100%{background-color: blue} /* Цвет в конце анимации */ }