Question

我正在写一个网站，其中徽标将成为一个单词，其中中间字符与外部字符的颜色不同; e.g。

<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;太多了？

更新

这里有一些基于黑客攻击彩虹的示例代码 - 但是当您调整文本大小的那一刻（例如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>

Answer 1

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

小心css中的第n个孩子我认为IE支持是ie9 +

span：nth-last-child（2）{ 颜色：绿色; }

Answer 2

如果没有将每个字母包装在某种标签中，我认为你不能这样做，这样你就可以用CSS或者使用JavaScript来定位它。虽然有趣的问题......

Answer 3

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>

一个元素的多种颜色

3 个答案: