svg作为背景图像，使用遮罩更改颜色，并使用阴影显示阴影

如何解决svg作为背景图像，使用遮罩更改颜色，并使用阴影显示阴影

我是编码html和css的初学者，所以是有关svg的问题。当我将svg用作背景图像并想要更改颜色时也产生阴影时，这两种特性无法同时使用。希望有人可以帮助我：

    .image-container {
        width: 100px;
        height: 100px;
        background-size: 100%;
        background-color: #E1A95F;
        -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
        -webkit-mask-size: cover;
        filter: drop-shadow(1px 1px 4px rgba(0,0.75));
    }

   <div class="image-container"></div>
    


 

解决方法

将掩码应用于伪元素，因为您需要一个额外的元素来应用过滤器。它应该是您不应用遮罩的元素。

.image-container {
  width: 100px;
  height: 100px;
  filter: drop-shadow(1px 1px 4px rgba(0,0.75));
}
.image-container:before {
  content:"";
  display:block;
  height:100%;
  background-color: #E1A95F;
  -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
  -webkit-mask-size: cover;
}

<div class="image-container"></div>