在具有透明背景的图像上放置渐变背景

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;
}

它也性能更好。

此外，您可以轻松地制作动画。

如本codepen中的例子https://codepen.io/shshaw/pen/YpERQQ

:)

在具有透明背景的图像上放置渐变背景

Placing a gradient background on an image with transparent background

css

svg