CSS Фон цвет
С помощью CSS свойства background определяют фон, эффекты для элементов.
В этих главах вы узнаете о следующих свойствах фона CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color
Свойство 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;
}
Попробуйте сами »
Непрозрачность / Прозрачность
Свойство opacity определяет непрозрачность/прозрачность элемента.
Оно может принимать значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Примечание: При использовании свойства 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% */
}
Попробуйте сами »