Как сделать прозрачность фона в css

Чтобы сделать прозрачный фон в CSS, нужно использовать свойство opacity. Оно изменяет прозрачность всего элемента, включая его содержимое.

Пример:

HTML:

<div class="transparent">
  <p>Текст на прозрачном фоне</p>
</div>

CSS:

.transparent {
  background-color: red; /* установим красный цвет фона */
  opacity: 0.5; /* установим прозрачность в 50% */
}

p {
  color: white; /* чтобы текст был виден, установим белый цвет */
}

В данном примере мы создаем блок div с классом .transparent и устанавливаем ему красный фон. Затем с помощью свойства opacity устанавливаем прозрачность в 50%.

Обычно с прозрачным фоном удобнее работать через свойство rgba. Это свойство устанавливает цвет фона с учётом прозрачности.

Пример:

.transparent {
  background-color: rgba(255, 0, 0, 0.5); /* установим полупрозрачный красный цвет фона */
}

В данном примере мы устанавлмваем цвет фона через функцию rgba, которая принимает 4 параметра: значения красного, зелёного и синего цвета (от 0 до 255) и прозрачность (от 0 до 1). В данном случае мы устанавливаем полупрозрачный красный цвет фона с прозрачностью 0.5.