CSS background - Фон
CSS свойства background
используются для добавления фоновых эффектов к элементам.
В этих главах вы узнаете о следующих свойствах CSS background:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
background
(свойство сокращения)
CSS background-color
CSS свойство background-color
определяет цвет фона элемента.
Цвет фона всей веб страницы определяется следующим образом:
body {
background-color: lightblue;
}
Попробуйте сами »
В CSS цвет чаще всего определяется с помощью:
- Название цвета - например "red"
- HEX значение - например "#ff0000"
- RGB значение - например "rgb(255,0,0)"
Посмотрите на CSS Значения цвета для получения полного списка возможных значений цвета.
Другие элементы
Вы можете установить цвет фона для любых HTML элементов:
Здесь, элементы <h1>, <p>, и <div> будут иметь разный цвет фона:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Попробуйте сами »
Непрозрачность / Прозрачность
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% */
}
Попробуйте сами »