背景图像叠加

Question

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

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

还有其他方法可以使此图像与背景图像方法叠加吗？

Answer 1

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