如何在不影响透明区域的情况下在图像上添加颜色？

Question

我想知道如何在不影响透明区域的情况下在图像上添加颜色。我必须说我想要应用具有硬转换的渐变。

我尝试通过svg实现它，但是渐变动画中存在问题。

我试图通过掩码来实现它，但它只能在webkit中正常工作。

有一个选项可以使用渐变制作一个div，并在其上面放置一张带背景的图片（我在其他网站上看到过），但我的背景不允许这样做是不明显的对眼睛。

默认图片：

应该是：

应该可以动画：

谢谢你的回答！ ：）

Answer 1

只是想一想，也许你应该创建一个png来切割图像的形状。所以你的图像将在底部，然后在div中你可以让你的彩色div具有一点点不透明度＆amp;作为最顶层的，您将新的png（倒置版本）保留为最顶层。这可能有用。

让我知道。

谢谢！

Answer 2

不完美，但可以是一个开始：

.base {
  width: 300px;
  height: 600px;
  overflow: hidden;
  position: relative;
  background-color: lightgreen;
}

.test {
  width: 300px;
  height: 200px;
  background-image: url(https://i.stack.imgur.com/sklUO.png);
  background-size: 100%;
  position: absolute;  
  animation: move 12s infinite linear;
}

.t1 {
  top: 0px;
  background-position: 0px 0px;
  filter: sepia(100%) saturate(200) hue-rotate(40deg);
}
.t2 {
  top: 200px;
  background-position: 0px -200px;
  filter: sepia(100%) saturate(200) hue-rotate(130deg);
  animation-delay: -3s;
}
.t3 {
  top: 400px;
  background-position: 0px -400px;
  filter: sepia(100%) saturate(200) hue-rotate(220deg);
  animation-delay: -6s;
}
.t4 {
  top: 600px;
  background-position: 0px -600px;
  filter: sepia(100%) saturate(200) hue-rotate(310deg);
  animation-delay: -9s;
}


@keyframes move {
  from {
  top: -200px;
  background-position: 0px 200px;

  }
  to {
  top: 600px;
  background-position: 0px -600px;

  }
}




body {
}

<div class="base">
<div class="test t1"></div>
<div class="test t2"></div>
<div class="test t3"></div>
<div class="test t4"></div>
</div>