CSS- фоны
Свойства фона CSS используются для добавления фоновых эффектов для элементов.
В этих главах вы узнаете о следующих свойствах фона CSS:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
background
(сокращенное свойство)
Цвет фона CSS
Свойство background-color
определяет цвет фона элемента.
Пример
Цвет фона страницы устанавливается следующим образом:
body {
background-color: lightblue;
}
В CSS цвет чаще всего определяется:
- допустимое название цвета - например, "красный"
- шестнадцатеричное значение - например, "#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. Чем меньше значение, тем прозрачнее:
непрозрачность 1
непрозрачность 0,6
непрозрачность 0,3
непрозрачность 0,1
Пример
div {
background-color: green;
opacity: 0.3;
}
Примечание. При использовании opacity
свойства для добавления прозрачности к фону элемента все его дочерние элементы наследуют одинаковую прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA . В следующем примере задается непрозрачность цвета фона, а не текста:
100% непрозрачность
60% непрозрачность
30% непрозрачность
10% непрозрачность
Из нашей главы «Цвета CSS » вы узнали , что в качестве значения цвета можно использовать RGB. В дополнение к RGB вы можете использовать значение цвета RGB с альфа- каналом (RGB A ), который определяет непрозрачность цвета.
Значение цвета RGBA указывается с помощью: rgba(красный, зеленый, синий, альфа ). Альфа- параметр представляет собой число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).
Совет: вы узнаете больше о цветах RGBA в нашей главе «Цвета CSS » .
Пример
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}