仅使用CSS的多色文本 [英] Multi-Colored text using only CSS

问题描述

我不确定我的标题是否连贯地表达了我的问题，但我将在下面进行解释.

I'm not sure if my title coherently expressed my issue, but I'll explain below.

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

I would like to assign a different color to each character in a string of text using only CSS.

以直观的方式查看我的问题，并提供进一步的解释: http://codepen.io/Connor3xL/pen/ZOyzJK

To see a visual of my issue with further explanations: http://codepen.io/Connor3xL/pen/ZOyzJK

我不能使用它，反正这很耗时:

I cannot use this, and it's a bit time consuming anyways:

<!--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>

我想要这个，只能使用这个:

I want this and can only use this:

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

其中用户名"将由CSS定义.那就是我需要的CSS.显然，这也将与HTML版本具有相同的效果.

Where "username" would be defined by CSS. That CSS is what I need. This would also obviously have the same effect as the HTML version.

之所以只在CSS中使用它，是因为我在Xenforo用户名上使用了此代码.我以前看过它，所以我知道这很有可能.我用谷歌搜索了大约半个小时，尝试了渐变，无法复制它.我希望有人可以提供帮助.

The reason I need it to be only in CSS is because I'm using this code on Xenforo Usernames. I've seen it done before, so I know it is very well possible. I've googled for about half an hour, experimented with gradients, couldn't duplicate it. I'm hoping somebody out there can help.

推荐答案

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

Dumb CSS only solution - where you need to put each letter into separate <span> so you can use :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>

OR

您可以使用

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>");

OR

也许您正在寻找类似 this

这篇关于仅使用CSS的多色文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！