是否有任何干净的CSS方法使单词中的每个字母都有不同的颜色？

StackOverflow https://stackoverflow.com/questions/155584

  •  03-07-2019
  •  | 
  •  

题

我需要一种方法来让一个单词的每个字母旋转3种不同的颜色。我知道一些不那么干净的方法我可以用asp.NET做到这一点，但我想知道是否有更清洁的CSS / JavaScript解决方案更适合搜索引擎。

设计师包括这样的文件对于每个页面。我宁愿不必为每个页面手动生成图像，因为这使得非技术站点编辑很难添加页面和更改页面名称。

有帮助吗？

解决方案

这是一些JavaScript。

<script type="text/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>");
</script>

其他提示

在服务器端，您可以轻松地做到这一点，而不会烦人的搜索引擎AFAIK。

// 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'属性。

肯定没有使用CSS的解决方案，因为CSS选择器不允许您访问单个字母（除了：first-letter ）。

  

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

然后自动生成图像。

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

所以非技术用户只需要这样做：

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

然后redblueyellow.cfm脚本将使用现有的programs.png或根据需要生成具有多种颜色的新图像。

如果您愿意，我可以提供样本CFML或伪代码吗？

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top