制作单独的元素
另一种方法是使用 HTML <span> 标记创建具有单独元素的文本，该标记是一个空容器。
这意味着我们可以通过将每个字母放在单独的元素中来为文本的每个字母定义不同的颜色来创建多色文本。
在 HTML 中使用单独的元素创建多色文本的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<span style="color:#FF0000">H</span>
<span style="color:#66CC66">e</span>
<span style="color:#FF9966">l</span>
<span style="color:#FFCCCC">l</span>
<span style="color:#FF0066">o</span>
</body>
</html>
使用 CSS
最后，我们可以使用 CSS。
这是创建此类文本的最简单方法。
将文本放在 <span> 标签中，并为其指定一个类名“multicolortext”。
然后，我们需要 CSS background-image 属性使用其“线性渐变”值向文本添加渐变背景，我们可以其中放置首选颜色的名称。
要获得多色文本而不是多色背景，我们需要使用 background-clip 属性，该属性可让我们控制背景图像或者颜色超出元素的内边距或者内容的程度。
此步骤为文本提供了一些颜色，但不完全是我们想要的颜色。
我们可以通过使用 color 属性使文本颜色透明来获得最终结果，以便背景颜色将反映在文本中。
使用 HTML 和 CSS 创建多色文本的示例：
<!DOCTYPE html>
<html>
<head>
<title>The 文档的标题</title>
<style>
.multicolortext {
background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>
<span class="multicolortext">今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</span>
</h1>
</body>
</html>
使用图像编辑器
我们可以借助 Pixelmator、Photoshop 等图像编辑器创建多色文本。
因此，我们可以创建多色图像并将其嵌入到中。
使用此方法将无法搜索多色文本。
因此，代码将如下所示：
<img src="multicolortext.png"/>
多色文本可以使对访问者更具吸引力和趣味性。
此代码将了解如何为创建此类文本。
有 3 种方法可以创建多色文本。
让我们一起潜入并尝试一下。
日期：2020-06-02 22:15:02 来源：oir作者：oir