主页 / 问题 / 1188889
Accepted
Andrew Kachalin
Asked:2021-10-11 21:37:13 +0800 CST2021-10-11 21:37:13 +0800 CST

是否可以在 html 中用多种颜色为一个字母着色？

  • 772

我发现了一个不起作用的技巧：

<h1>you are <a>gay</a></h1>
a{
color;
}

我用谷歌搜索了英文堆栈 - 他们提供分别用不同的颜色为每个字母着色。但问题是，在同性恋旗帜中，条纹是水平的，而不是垂直的，所以垂直颜色看起来并不那么具有象征意义。有没有办法绕过这些限制，以便用户获得彩虹文本并且每个字符都是多色的？

html

2 个回答

  1. Best Answer

    h1 { font: bold 48px/48px 'Arial Black'; }
a {
  background-image: linear-gradient(to bottom, #e40303 45%, #ff8c00 46%, #ff8c00 51%, #ffed00 52%, #ffed00 57%, #008026 58%, #008026 63%, #004dff 64%, #004dff 69%, #750787 70%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  color: black;
}
    <h1>you are <a>Gay</a></h1>

    • 9

  2. 如果您不考虑可疑主题，而只考虑实现方式，那么最简单的选择是以跨度形式使用字符包装器。

    <style>
    p span:nth-child(1) {color:orange;}
    p span:nth-child(2) {color:yellow;}
    p span:nth-child(3) {color:green;}
    p span:nth-child(4) {color:blue;}
    p span:nth-child(5) { color :purple;}
</style>
    <p><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></p>

    • 2

相关问题