1

我正在写一个网站，其中徽标将是一个单词，其中中间字符与外部字符颜色不同；例如

<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>
4

3 回答 3

2

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

小心 css 中的 n-th-child 我认为 IE 支持是 ie9+

span:nth-last-child(2) { 颜色：绿色；}

于 2013-01-08T23:09:35.073 回答
0

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

于 2013-01-08T23:20:40.617 回答
0

附言。这是适用于有类似问题但没有 js 问题的任何人的 javascript 版本。这使用了 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-08T23:42:22.860 回答