背景图像叠加

我正在尝试使用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方法重叠吗?

评论
  • Lily
    Lily 回复

    您可以尝试使用具有背景颜色的after元素,并根据需要应用不透明度