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

Существует несколько способов сделать фон поверх картинки в CSS, но одним из наиболее распространенных является использование свойства background.

Например, чтобы создать полупрозрачный фон поверх картинки, можно использовать следующий CSS код:

<div class="image-container">
  <div class="image-overlay">
    <h2>Текст на фоне картинки</h2>
    <p>Дополнительный текст</p>
  </div>
  <img src="https://example.com/my-image.jpg" alt="Моя картинка">
</div>

<style>
.image-container {
  position: relative;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
</style>

В этом примере div-контейнер с классом .image-container имеет позицию relative, чтобы содержимое с абсолютной позицией, такое как div с классом .image-overlay, располагалось относительно него.

Div с классом .image-overlay имеет абсолютную позицию и занимает всю площадь родительского контейнера благодаря свойствам top, bottom, left, right.

Затем установлен цвет фона с полупрозрачностью с помощью rgba, display: flex для выравнивания элементов по центру и размеры отступов с помощью padding.

В данном примере содержимое .image-overlay вставлено в div, но также можно использовать span, p и другие теги.

Фон также можно задавать с помощью изображения или градиента, добавляя свойства background-image и background-gradient. Например:

.image-overlay {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
}

Этот код создает градиентный фон поверх картинки, начиная с непрозрачной черной в верхней части и заканчивая полупрозрачной черной в нижней.