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

Чтобы сделать градиент поверх картинки в CSS, можно использовать свойство background-image, которое поддерживает несколько значений в виде слоев. С помощью этого свойства можно накладывать слои цвета или фона поверх изображения.

Вот пример:

HTML:

<div class="image-with-gradient">
  <img src="path-to-image.jpg" alt="alt-text">
  <div class="gradient-overlay"></div>
</div>

CSS:

.image-with-gradient {
  position: relative;
  height: 400px;
  width: 100%;
}

.image-with-gradient img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
}

Этот код создаст блок с изображением в теге <img> и градиентным оверлеем в виде прозрачных чёрных слоёв поверх изображения. С помощью свойства position: relative; помечаем родительский блок, чтобы использовать его в качестве точки отсчёта для абсолютно позиционированных элементов. Затем, задаём размеры родительского блока и изображения внутри него.

Для создания градиента используем свойство background-image с линейным градиентом. В значении градиента указываются два цвета в формате RGBA (красный, зелёный, голубой и альфа-канал). Первый цвет определяет начало градиента, а второй — конец. В нашем примере используется градиент, начинающийся с полностью непрозрачного чёрного цвета (rgba(0, 0, 0, 0.6)) и заканчивающийся более прозрачным чёрным цветом (rgba(0, 0, 0, 0.3)). Эти цвета поочередно налагаются на изображение, создавая эффект полупрозрачности.

Когда вы обновите страницу, вы должны увидеть изображение с градиентом поверх него. Вы можете изменить цвета и прозрачность градиента, чтобы он соответствовал вашим нуждам и дизайну.