Question

我不确定我的标题是否一致地表达了我的问题，但我将在下面解释。

我想使用仅 CSS为文本字符串中的每个字符分配不同的颜色。

通过进一步说明查看我的问题的视觉效果：http://codepen.io/Connor3xL/pen/ZOyzJK

我无法使用它，反正有点耗费时间：

<!--I don't want this, and I cannot use it-->
<span style="font-family: tahoma">
<span style="color: red">U</span>
<span style="color: blue">s</span>
<span style="color: red">e</span>
<span style="color: blue">r</span>
<span style="color: red">n</span>
<span style="color: blue">a</span>
<span style="color: red">m</span>
<span style="color: blue">e</span>
</span>

我想要这个，只能使用它：

<span class="username">Username</div>

其中“username”将由CSS定义。 CSS就是我需要的。这显然也与HTML版本具有相同的效果。

我需要它只在CSS中的原因是因为我在Xenforo用户名上使用此代码。我之前见过它，所以我知道它很有可能。我用Google搜索了大约半个小时，试验了渐变，无法复制它。我希望有人可以提供帮助。

Answer 1

Dumb CSS only解决方案 - 您需要将每个字母放在单独的<span>中，以便您可以使用:nth-child(2n+1)

.username span {
  color: red;
}
.username span:nth-child(2n+1) {
  color: blue;
}

<span class="username"><span>U</span><span>s</span><span>e</span><span>r</span><span>n</span><span>a</span><span>m</span><span>e</span></span>

或

您可以使用this中建议的 Ryan Rodemoyer 这样的小型答案：

var message = "The quick brown fox."; var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue for (var i = 0; i < message.length; i++) document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");

或

也许你正在寻找像this
这样的东西

Answer 2

这可以通过CSS来实现，尽管只有一些注意事项：

必须使用等宽字体
所需的文字必须传递给CSS

一般原则是：

以所需的基色输出整个单词
使用绝对定位的伪元素输出替代颜色，这可以通过指定所需的字母并使用空格来保留基本颜色的字母

这是因为等宽字体中的字母占用相同的空间（因此您可以确保字母位于正确的位置）。通过使用绝对定位，字母可以放在HTML中设置的单词之上。

.username {
  color: red;
  font-family: monospace;
  position: relative;
}
.username:after {
  color: blue;
  content: attr(data-descr);
  left: 0;
  position: absolute;
}

<div class="username" data-descr="u e n m">username</div>

JS Fiddle

仅使用CSS的多色文本

2 个答案: