CSS Background - Фон
Свойства фона CSS используются для определения фоновых эффектов для элементов.
В этих главах вы узнаете о следующих свойствах фона 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 / Transparency - Непрозрачность / Прозрачность
Свойство 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 (полностью непрозрачный).
Совет: Вы узнаете больше о цветах RGBA в главе CSS Цвета на нашем сайте W3Schools на русском.
