Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

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 */
}