我可以在css中为文本的背景色添加线性渐变吗

Question

我想在CSS中为文本的背景色添加线性渐变。我知道线性梯度是一种图像。这是我的代码，它不起作用。有其他方法可以做到这一点吗？

<h1 style"background-color: linear-gradient(red, yellow);">Linear Gradient - Top to Bottom

请帮忙。

Answer 1

你不能像那样直接对文本进行处理，但你可以使用background-clip来实现这一点。

h2 {
font-size: 30px;
background: linear-gradient(red, yellow);
background-clip: text;
-webkit-text-fill-color: transparent;
}

<h2>COLORFUL TEXT</h2>

如果只想给文本背景上色，那么只需添加到文本背景中即可。易于理解的不使用background-color，只使用background

h2 {
text-align: center;
background: linear-gradient(red, yellow);      
}

<h2>COLORFUL TEXT</h2>