CSS background color

05.02.2019 at 08:43


Нередко требуется сделать фоновый цвет для какого-то элемента веб-страницы. Например, если необходимо выделить блок с важной информацией. За это отвечает свойство 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 и другие.

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

<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} /* Цвет в конце анимации */
}
Tags:
Author: