Фон CSS

CSS-свойства фона используются для определения фонового эффекта элемента.

В этих разделах вы узнаете о таких CSS-свойствах фона:

  • цвет фона
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS color фона

цвет фона Свойство specifies the background color of an element.

Пример

Цвет фона страницы настроен следующим образом:

body {
  цвет фона: lightblue;
}

Попробуйте сами

Цвет обычно определяется следующим образом через CSS:

  • Действительное имя цвета - например, "red"
  • Значение шестнадцатеричного кода - например, "#ff0000"
  • Значение RGB - например, "rgb(255,0,0)"

Пожалуйста, посмотрите Цветовые значения CSS，получить полный список возможных значений цветов.

Другие элементы

Вы можете установить цвет фона для любого HTML-элемента:

Пример

Здесь элементы <h1>, <p> и <div> будут иметь разные цвета фона:

h1 {
  цвет фона: green;
}
div {
  цвет фона: lightblue;
}
p {
  цвет фона: yellow;
}

Попробуйте сами

непрозрачность / прозрачность

Свойство непрозрачности specifies the opacity/transparency of an element. The range of values is 0.0 - 1.0. The lower the value, the more transparent it is:

непрозрачность 1
непрозрачность 0.6
непрозрачность 0.3
непрозрачность 0.1

Пример

div {
  цвет фона: green;
  непрозрачность: 0.3;
}

Попробуйте сами

Внимание:Использование непрозрачность Когда свойство непрозрачности добавляется к фону элемента, все его подэлементы наследуют одинаковую непрозрачность. Это может сделать текст в полностью прозрачных элементах трудночитаемым.

Использование непрозрачности RGBA

Если вы не хотите применить непрозрачность к подэлементам, например, в предыдущем примере, используйте: RGBA Значение цвета. В следующем примере устанавливается цвет фона, а не непрозрачность текста:

100% непрозрачности
60% непрозрачности
30% непрозрачности
10% непрозрачности

Вы можете найти больше информации о нас Цвета CSS В этой главе вы узнали, как можно использовать RGB в качестве значения цвета. Помимо RGB, можно использовать значения RGB-цвета с alpha каналы используются вместе (RGBA) - этот канал указывает на непрозрачность цвета.

Цветовые значения RGBA указываются как: rgba(красный, зеленый, голубой, alpha)。alpha Параметр - это число между 0.0 (полностью прозрачный) и 1.0 (абсолютно непрозрачный).

Совет:Вы можете найти больше информации о цветах RGBA в наших Цвета CSS В этой главе вы узнаете больше о цветах RGBA.

Пример

div {
  background: rgba(0, 128, 0, 0.3) /* Зеленый фон с непрозрачностью 30% */
}

Попробуйте сами