我想要實作的基本上是在文本上出現漸變，而不是影像的背景。我在這里創建了一個示例： 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 的背景應保持為黑色。
最終的目標是在影像下方也有漸變過渡，因此漸變也會在影像下方水平滑動。
uj5u.com熱心網友回復：
將影像用作公共元素上的蒙版
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>uj5u.com熱心網友回復：
你的實作有點問題。
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
:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475339.html
下一篇：如何在React中匯入SVG圖示