css - svg 作为背景图像，带有 mask 以更改颜色，并带有阴影以显示阴影

Question

我是 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,0,0.75));
    }

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


 

Answer 1

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

.image-container {
  width: 100px;
  height: 100px;
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 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>