背景圖像疊加

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

如果您願意，可以嘗試使用帶有背景顏色的后元素並應用不透明度