透明元素叠加在动画渐变上的图像

Question

我正在尝试使用一些透明元素为图像后面的颜色渐变设置动画，以便只有图像的透明部分有颜色变化。目前，颜色渐变动画贯穿整个图像，就好像它在 png 花卉图像的前面而不是后面。有谁可以帮助我吗？谢谢

HTML

<body>
    <h1>
        <div class="shimmer"></div>
        <img src="https://i.imgur.com/XYoiBsw.png" />
    </h1>
</body>

CSS

h1
{
display: inline-block;
overflow: hidden;
position: relative;
}

h1 a, h1 div.shimmer
{
height: 100%;
width: 100%;
position: absolute;
top: 0px;

}
h1 a
{
display: block;
z-index: 3;
}
h1 a span { display: none; }

h1 div.shimmer
{
background-image: linear-gradient(110deg, rgba(109,246,217,0.60) 25%, rgba(209,246,217,0.70) 37%, rgba(255,255,255,0.98) 50%, rgba(246,176,45,0.70) 85%, rgba(65,226,135,0.60) 99%); /* W3C */
background-repeat: repeat-y;
background-size: 100% 100%;
left: -100%;
z-index: 2;
}
h1:hover div.shimmer
{
left: 100%;
transition: left 1.35s linear;
}

Answer 1

将 h1 div.shimmer {z-index: 2;} 更改为 z-index: -1; :

h1
{
display: inline-block;
overflow: hidden;
position: relative;
}

h1 a, h1 div.shimmer
{
height: 100%;
width: 100%;
position: absolute;
top: 0px;

}

h1 a span { display: none; }

h1 div.shimmer
{
background-image: linear-gradient(110deg, rgba(109,246,217,0.60) 25%, rgba(209,246,217,0.70) 37%, rgba(255,255,255,0.98) 50%, rgba(246,176,45,0.70) 85%, rgba(65,226,135,0.60) 99%); /* W3C */
background-repeat: repeat-y;
background-size: 100% 100%;
left: -100%;
z-index: -1;
}
h1:hover div.shimmer
{
left: 100%;
transition: left 1.35s linear;
}

<body>
    <h1>
        <div class="shimmer"></div>
        <img src="https://i.imgur.com/XYoiBsw.png" />
    </h1>
</body>

透明元素叠加在动画渐变上的图像

Image with transparent elements overlayed on animated gradient

html

css

linear-gradients