javascript - 如何在不影响透明区域的情况下给图像上色？

Question

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

我尝试通过svg来实现，但是渐变的动画有问题。

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

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

默认图片:

应该是:

应该可以制作动画:

谢谢各位的解答! :)

Answer 1

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

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

.test {
  width: 300px;
  height: 200px;
  background-image: url(/image/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>