背景图像叠加

我正在尝试使用CSS作为背景图像在div中插入图像：

.our-service-list-card.width-big.height-big  {
flex-basis: 652px;
background-image: url(../assets/img/Card1.svg);
background-repeat: no-repeat;
background-position: center;

我也将鼠标悬停在上面以更改颜色：

.our-service-list-card:hover {
background-color: #6FF5EA;
transition: 0.3s; }

我发现可以在此图片之上/包含此图片的效果是

background-blend-mode: overlay; 
background-blend-mode: lighten;

但是我觉得我缺少这种更简单的解决方案。

还有其他方法可以使此图像与background-image方法重叠吗？