背景图像叠加

Question

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

.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元素的背景颜色和应用不透明度，如果你喜欢