Как наложить градиент на картинку в CSS

Для наложения градиента на картинку в CSS можно использовать свойство background-image и функцию linear-gradient. Например:

div {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%), url('my-image.jpg');
}

В данном примере мы создаем градиент, который идет от полностью прозрачного белого цвета вверху до полностью непрозрачного белого цвета внизу. Затем мы добавляем картинку с помощью функции url().

Можно также изменять направление и цвета градиента, чтобы получить нужный эффект..