CSS渐变文本

Question

我有一个网站的一部分，涉及到一个渐变里面的文本。我已经试着寻找如何做这件事，但什么都不适合我。

做这件事的有效方法是什么?

.gradient-text {
background-color: red;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
font-family: "Archivo Black", sans-serif;
font-weight: normal;
font-size: 6em;
text-align: center;
margin-bottom: 0;
margin-bottom: -0.25em;
}

Answer 1

这将为所有h1标签添加渐变文本:

HTML:

<h1>Gradient text</h1>

CSS:

h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

添加渐变背景，而不是文本:

HTML:

<h1>Gradient background</h1>

CSS:

h1 {
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}