为透明背景的图像添加渐变背景

Question

我想要实现的是基本上有一个梯度出现在文本上，而不是图像的背景。我在这里创建了一个例子:https://codepen.io/BenSagiStuff/pen/BaYKbNj

body{
background: black;
}
img{
padding: 30px;
background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
}

<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png" >

正如你所看到的，目前图像的背景有渐变，但是，我想要的是文字"Google"为了有渐变和PNG的背景应该保持黑色。

最终的目标是在图像下方也有渐变过渡，因此渐变也会在图像下方水平滑动。

Answer 1

使用图片作为普通元素的蒙版

body{
background: black;
}
.box{
--img:url(https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png);

width:300px;
aspect-ratio:3;
background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
-webkit-mask: var(--img) 50%/cover;
mask: var(--img) 50%/cover;
}

<div class="box"></div>

Answer 2

你的实现有一点小问题。

PNG是透明的，但它是一个正方形的图像。使用svg图像或在文本标记中应用此渐变背景可能会成功。

在你的HTML中，你可以这样写:

<div>
<h1>Google</h1>
</div>

这样写你的CSS

body{
background: black;
font-family:helvetica;
}
h1{
background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
font-size: 160px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
div {
display:flex;
}

对于性能也更好.

也可以animate容易。

如本代码中的示例https://codepen.io/shshaw/pen/YpERQQ

:)