透明領域に影響を与えずに画像に色を付ける方法は？

Question

透明領域に影響を与えずに画像に色を付ける方法が不思議です。私は、ハード遷移を伴うグラデーションを適用したいと言わなければならない。

私はsvgで実装しようとしましたが、グラデーションのアニメーションに問題があります。

私はマスクを通してそれを作ろうとしましたが、ウェブキットでのみ正しく動作します。

グラデーションを使ってdivを作成するオプションがありました。その上に背景（私は他のサイトで見たことがある）を使って写真を置いていましたが、背景には気付かない目。

デフォルト画像：

それは次のようになります。

アニメーション化することが可能です：

答えをありがとう！ :)

Answer 1

完璧ではないが、初めになります

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

Answer 2

ちょっと考えれば、画像の形が切り取られているpngを作成する必要があるかもしれません。あなたの画像は一番下に表示されます。その後、divで不透明度が少ししかない色のdivを持つことができます。&最後に、新しいpng（倒立バージョン）を一番上のレイヤーにします。これは機能するかもしれません。

私に知らせてください。

ありがとうございます！