Подгонка изображения под фон в соответствии с цветовой гаммой

Question

У меня есть дизайн в Adobe XD, подобный этому, который одинаков на каждой подстранице:

Есть ли способ получить этот результат ?

Вот базовый c код:

body {
  background-color: #4D4D4D;
  position: relative;
}

img {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: 100%;
}

<img src="https://i.ibb.co/xSc3fpc/image.png" alt="image">

Для меня сейчас не является существенным центрирующим изображением. Я не знаю, как написать CSS / HTML, чтобы соответствовать дизайну. Цвет кузова #4D4D4D

Спасибо за любую помощь

Answer 1

Вы должны удалить элемент img, добавить изображение в фоновом режиме и использовать background-blend-mode

body {
    background: #4D4D4D url(https://i.ibb.co/xSc3fpc/image.png);
    position: relative;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 50%;
    height: 400px;
    background-blend-mode: multiply;
}