使用SVG作为背景图像，使用遮罩更改颜色并添加投影以显示阴影。

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>
    


 

- Yichen Dai

Answer 1

在伪元素上应用遮罩是因为您需要一个额外的元素来应用过滤器。这个元素应该是不应用遮罩的元素。

.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>

- Temani Afif

---

@YichenDai，你可以在 https://jsfiddle.net/ 上展示你的代码吗？ - Temani Afif

代码在这里：https://jsfiddle.net/jevonsdone/drLa6148/ - Yichen Dai

@YichenDai 试试这个：https://jsfiddle.net/60eoqrc7/ - Temani Afif