有没有一种干净的CSS方法可以使单词中的每个字母都有不同的颜色？

Question

我需要一种方法，可以让单词中的每个字母轮流显示3种不同的颜色。我知道一些通过asp.NET实现的不太规范的方法，但我想知道是否存在更加清晰的CSS/JavaScript解决方案，而且更符合搜索引擎友好度。

设计师在每个页面中都包含像这样的文件。我不想为每个页面手动生成图片，因为这会使得非技术人员的网站编辑添加页面和更改页面名称变得困难。

- EfficionDave

---

你需要它做什么？ - Peter Boughton

Answer 1

以下是一些 JavaScript 代码。

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

- rodey

Answer 2

仅使用CSS是无法解决问题的，因为CSS选择器无法访问单个字母（除了:first-letter）。

- Paul D. Waite

Answer 3

在服务器端，据我所知，你可以很容易地做到这一点，而不会打扰搜索引擎。

// This server-side code example is in JavaScript because that's
// what I know best.
var words = split(message, " ");
var c = 1;
for(var i = 0; i < words.length; i++) {
   print("<span class=\"color" + c + "\">" + words[i] + "</span> ");
   c = c + 1; if (c > 3) c = 1;
}

如果你真的想要非常简单的内联HTML代码，可以编写客户端Javascript来检索给定P或DIV或其他标签的ID中的消息，拆分它，并像上面那样重新编码，然后替换P或DIV的“innerHTML”属性。

- Brendan Kidwell

---

我的示例代码逐字处理消息，而用户希望按字符处理... 但是你懂的，希望你能明白我的意思。 - Brendan Kidwell

Answer 4

我宁愿不必为每个页面手动生成图像。

然后自动生成图像。

您没有指定使用哪种服务器端技术，但是任何好的技术都将允许您操作图像（或至少调用外部图像实用程序）。

因此，非技术用户只需要执行类似于以下操作：

<img src="images/redblueyellow.cfm/programs.png" alt="programs"/>

而 redblueyellow.cfm 脚本将使用现有的 programs.png 或生成所需的多种颜色的新图像。

如果您愿意，我可以提供示例 CFML 或伪代码来完成此操作？

- Peter Boughton

---

用图像替换文本内容存在许多无法访问的问题。这通常是不可取的。选择笨拙但更开放的<span>解决方案。 - annakata

@annakata @Peter：我认为使用图像而不是文本的唯一可访问性问题是用户无法像文本那样调整图像大小。虽然现在所有浏览器都实现了缩放（通常作为增加页面上物体大小的默认方法），但我认为这已经不是一个问题了。（尽管当大小增加时，真正的文本比缩放后的图像更易读。） - Paul D. Waite

@保罗 @彼得：不，主要无障碍问题在于文字的图片并非文本，因此对屏幕阅读器技术构成障碍。此外，还存在部分视力有障碍者和色盲者可能遇到的颜色和对比度问题，这只是我能想到的一些问题，我甚至不是这方面的专家。 - annakata

@annakata：“主要的可访问性问题是，文字的图片不是文本，因此对于屏幕阅读器技术来说是一个问题。”哪些屏幕阅读器不会读出“alt”文本？ - Paul D. Waite

@Paul - 我并没有说没有解决方案:P问题在于文本“只是工作”，而图像替换则会施加限制并需要更多的考虑，因为它不是正确的。 - annakata