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

Для наложения градиента поверх картинки с помощью HTML и CSS можно воспользоваться псевдоэлементом ::before или ::after. Приведу пример кода:

HTML:

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

CSS:

.image-container {
  position: relative;
  display: inline-block;
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
}

В данном примере мы создаем контейнер для изображения с классом image-container, который позиционируется относительно себя. Затем с помощью псевдоэлемента ::after мы добавляем слой поверх изображения, который будет содержать градиент. С помощью свойств position: absolute, top: 0, left: 0, width: 100% и height: 100% мы делаем псевдоэлемент соответствующего размера и положения как у самого изображения. А свойство background позволяет задать градиент от прозрачного цвета до темного цвета (в данном случае черного с прозрачностью 0.7), и направление градиента (в данном случае от верха к низу).

Таким образом, при применении данного CSS стиля к блоку с изображением, вы создадите наложение градиента поверх изображения.