background-blend-mode で背景をブレンドする

画像を加工して再アップしなくても、色の変更がCSS だけで再現できます。また、cssで効果を切り替えたりといったことも容易になります。

div {
width: 300px;
height: 250px;
background-size: 300px 250px;
background-color: green;
background-image: url(test.jpg) no-repeat;
background-blend-mode: overlay;
}