Фоны CSS 

Свойства фона CSS используются для добавления фоновых эффектов для элементов.

Цвет фона CSS

Свойство background-color определяет цвет фона элемента.

Цвет фона страницы устроен следующим образом:

body { background-color: lightblue; }

В CSS цвет чаще всего определяется:

• действительное название цвета - например, "красный"
• значение HEX - например "#ff0000"
• значение RGB - например "rgb(255,0,0)"

Другие Элементы

Вы можете установить цвет фона для любых элементов HTML:

Пример

Здесь элементы <h1>, <p> и <div> будут иметь разные цвета фона:

h1 { background-color: green; }

div { background-color: lightblue; }

p { background-color: yellow; }

Непрозрачность / Прозрачность

Свойство opacity определяет непрозрачность/прозрачность элемента. Оно может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:

div { background-color: green; opacity: 0.3; }

Примечание: При использовании свойства opacity для добавления прозрачности фону элемента все его дочерние элементы наследуют одинаковую прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.

Прозрачность с помощью RGBA

Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA. В следующем примере устанавливается непрозрачность цвета фона, а не текста:

Значение цвета RGBA указывается: rgba (красный, зеленый, синий, альфа). Параметр альфа - это число между 0.0 (полностью прозрачным) и 1,0 (полностью непрозрачным).

div { background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */ }