一个元素的多种颜色

我正在写一个网站，其中的标志将成为一个字，其中中间的字符与外部字符是不同的颜色;例如一个元素的多种颜色

<style type="text/css" media="screen> 
    .logoG { color:blue; } 
    .logoGo { color:red; } 
    .logoGoo { color:yellow; } 
    .logoGoog { color:blue; } 
    .logoGoogl { color:green; } 
    .logoGoogle { color:red; } 
</style> 
<span class="logoG">G</span><span class="logoGo">o</span><span class="logoGoo">o</span><span class="logoGoog">g</span><span class="logoGoogl">l</span><span class="logoGoogle">e</span>

我想保留文本为文本;不使用图像替换技巧来隐藏文本并将其替换为徽标背景图像。即我想要的HTML看起来像这样：

<span class="logo">Google</span>

...并为CSS通过沿线的做的事情做重要的工作：

logo {visibility: none;} 
logo:after {visibility: visible; content: "G"; color:blue;} 
logo:after:after {content: "o"; color:red;} 
logo:after:after:after {content: "o"; color:yellow;} 
logo:after:after:after:after {content: "g"; color:blue;} 
logo:after:after:after:after:after {content: "l"; color:green;} 
logo:after:after:after:after:after:after {content: "e"; color:red;}

...或更好：

logo:first-letter {color:blue;} 
logo:nth-letter[2] {color:red;} 
logo:nth-letter[3] {color:yellow;} 
logo:nth-letter[4] {color:blue;} 
logo:nth-letter[5] {color:green;} 
logo:nth-letter[6] {color:red;}

到目前为止，我已经找到了最接近的诀窍是这一招对彩虹文字：http://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/

我也理想喜欢这个解决方案，如果可能的话，以避免JavaScript;太多了？

UPDATE

下面是其工作原理基于黑客彩虹一些示例代码 - 但是此刻你调整文本（例如CTRL + +）很快打破。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>Google Demo</title> 
    <style type="text/css" media="screen"> 
    h1 { 
     background-image:-webkit-gradient( 
     linear, left top, right top 
     , color-stop(0, blue) 
     , color-stop(0.018, blue) 
     , color-stop(0.018, red) 
     , color-stop(0.030, red) 
     , color-stop(0.030, yellow) 
     , color-stop(0.040, yellow) 
     , color-stop(0.040, blue) 
     , color-stop(0.054, blue) 
     , color-stop(0.054, green) 
     , color-stop(0.058, green) 
     , color-stop(0.059, red) 
     , color-stop(0.108, red) 
     ); 
     color:transparent; 
     -webkit-background-clip: text;  
    } 
    </style> 
</head> 
<body lang="en-US"> 
<h1>Google</h1> 
</body> 
</html>

来源

2013-01-08 JohnLBevan

ps。这里有一个JavaScript版本，适用于任何有类似问题但没有js问题的人。这使用Jesse的第n个孩子的诀窍以及一些代码来发挥相关标签的作用。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>Google Demo</title> 
    <style type="text/css" media="screen"> 
    h1 .x:nth-child(1) { color: blue; } 
    h1 .x:nth-child(2) { color: red; } 
    h1 .x:nth-child(3) { color: yellow; } 
    h1 .x:nth-child(4) { color: blue; } 
    h1 .x:nth-child(5) { color: green; } 
    h1 .x:nth-child(6) { color: red; } 
    </style> 
    <script type="text/javascript" charset="utf-8"> 
    function fancy() { 
     var h1s = document.getElementsByTagName('h1'); 
     for(var i = 0; i < h1s.length; i++) { 
      var h1Text = h1s[i].innerText; 
      var h1InnerHTML = ''; 
      for(var j = 0; j < h1Text.length; j++) { 
       h1InnerHTML += '<span class="x">' + h1Text[j] + '</span>'; //nb: innerHTML is a dodgy hack, but fine for demos/works in Chrome 
      } 
      h1s[i].innerHTML = h1InnerHTML; 
     } 
    } 
    </script> 
</head> 
<body lang="en-US" onload="fancy();"> 
    <h1>Google</h1> 
</body> 
</html>

来源

2013-01-08 23:42:22 JohnLBevan

你可以尝试css中的nth-child（）。检查此链接了：http://css-tricks.com/useful-nth-child-recipies/

小心第n个孩子在CSS，我认为IE支持IE9 +

跨度：第n-最后一个孩子（2）{ 颜色：绿色; }

来源

2013-01-08 23:09:35 Jesse

谢谢杰西。可悲的是，这并不符合要求（请参阅此处的示例：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-last-child_odd_even） – JohnLBevan

每个字母都需要是html元素，除非你像上面的约翰那样拼接。 – Jesse

我不认为你可以做到这一点，没有包装每个字母在某种标签，所以你可以使用CSS，或使用JavaScript的目标。虽然有趣的问题...

来源

2013-01-08 23:20:40 keeg

一个元素的多种颜色

回答

相关问题