Свойство background
CSS свойства background используются для добавления фоновых эффектов к элементам.
В этих главах вы узнаете о следующих свойствах CSS background:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(свойство сокращения)
CSS background-color
CSS свойство background-color определяет цвет фона элемента.
Цвет фона всей веб-страницы определяется следующим образом:
body {
background-color: lightblue;
}
Попробуйте сами »
В CSS цвет чаще всего определяется с помощью:
- Названия цвета — например, "red"
- HEX-значения — например, "#ff0000"
- RGB-значения — например, "rgb(255,0,0)"
Посмотрите на CSS Значения цвета для получения полного списка возможных значений цвета.
Другие элементы
Вы можете установить цвет фона для любых HTML-элементов:
Here, элементы <h1>, <p> и <div> будут иметь разный цвет фона:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Попробуйте сами »
CSS свойство opacity
CSS свойство opacity определяет непрозрачность/прозрачность элемента. Оно может принимать значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
div {
background-color: green;
opacity: 0.3;
}
Попробуйте сами »
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента, все его дочерние элементы наследуют одинаковую прозрачность. Может сделать текст внутри полностью прозрачным элементом, но он будет трудным для чтения.
Прозрачность с RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте RGBA значение цвета. В следующем примере устанавливается прозрачность для цвета фона, а не для текста:
100% opacity
60% opacity
30% opacity
10% opacity
Вы выучили CSS Раздел цвета, чтобы использовать RGB в качестве значения цвета. В дополнение к RGB, вы можете использовать значение цвета RGB с помощью alpha канала (RGBA) — который определяет непрозрачность для цвета.
Значение цвета RGBA определяется с помощью: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачное) до 1.0 (полностью непрозрачное).
Совет: Вы узнаете больше о цветах RGB в нашем разделе CSS Раздел цвета.
div {
background: rgba(0, 128, 0, 0.3) /* Зеленый фон с непрозрачностью 30% */
}
Попробуйте сами »