是否有任何干净的CSS方法可以使单词中的每个字母具有不同的颜色?

时间:2020-03-06 14:57:15  来源:igfitidea点击:

我需要一种允许单词的每个字母旋转3种不同颜色的方法。我知道有些不干净的方法可以使用asp.NET做到这一点,但我想知道是否可能有更清洁的CSS / JavaScript解决方案,对搜索引擎更友好。

设计器为每个页面都包含一个这样的文件。我宁愿不必为每个页面手动生成图像,因为这会使非技术站点编辑人员很难添加页面和更改页面名称。

解决方案

在服务器端,我们可以轻松完成此操作,而不会惹恼搜索引擎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)。

I'd rather not have to manually generate an image for every page

然后自动生成图像。

我们没有指定要使用的服务器端技术,但是任何一种好的技术都将允许我们操纵图像(或者至少调用外部图像实用程序)

因此,非技术用户只需执行以下操作:

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

然后redblueyellow.cfm脚本将使用现有的program.png或者生成具有所需多种颜色的新图像。

如果我们愿意,我可以提供示例CFML或者伪代码来执行此操作?

这是一些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>