Html 背景图像叠加

我正在尝试将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;

但我觉得有不同的更简单的解决方案，我错过了

---

是否有其他方法使此图像与背景图像方法重叠？

您可以尝试使用背景色的after元素并应用不透明度（如果愿意）

您可以尝试使用背景色的after元素并应用不透明度（如果愿意）