是否可以使用CSS来改变半个字的颜色（标识名称）？

我有一个名为Example的徽标名称。是否可以使用CSS来改变半个字的颜色（标识名称）？

我希望考试是蓝色的，并且勒是红色的。

我知道你可以使用：第一个字母，但我需要改变最多4个字符。这是阻止我制作纯CSS标志而不是使用图片的唯一因素。

2012-05-28 Kryptix

很容易在基于WebKit的浏览器，因此，如果您只定位Chrome或Safari ...:) – Ryan

只需将其分割成'span'分段和样式。它很容易，便携，不需要CSS5。 – Amadan

@Amadan CSS5？你是来自未来吗？ –

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <style> 
h1 { 
    font-size: 0; 
} 
h1:before { 
    content: 'Examp'; 
    color: #0000ff; 
    font-size: 32px; 
} 
h1:after { 
    content: 'le'; 
    color: #ff0000; 
    font-size: 32px; 
} 
     </style> 
    </head> 
    <body> 
     <h1>Example</h1> 
    </body> 
</html>

来源

2012-05-29 00:16:24 reisio

谢谢，我做了同样的事情，但没有与字体大小的部分。这是完美的，直到我意识到我也需要链接标题。 – Kryptix

如果您在其他地方有索引的备用链接，则可以将其重定位到标识。 – reisio

假设你可以修改标记，你可以只是重新换行文字：

<span class="branding-highlight">Exam</span>ple 
.branding-highlight {color:red;}

CSS没有访问n-th everything，只是还没有力学。如果可能的话，浏览器需要时间来采用它 - 上面的示例仍然得到最好的支持。

来源

2012-05-28 23:44:37

我不想修改标记，但我'很高兴我现在知道没有办法做我想做的事，所以我不会继续寻找答案。谢谢你的时间。 – Kryptix

-1

您可以使用此方法O.V建议！：
<div id="logo"><span style="color:red">Exam</span><span style="black">p</span><span style="blue">le</span></div>

来源

2012-05-28 23:46:07 mahaidery

你可以分割单（我认为是一个跨度）为3个独立的跨度。

<span class="blue logo">Exam</span><span class="logo">p</span><span class="red logo">le</span>

然后你的CSS可能会是这个样子

.blue { 
    color: blue; 
} 

.red { 
    color: red; 
} 

.logo { 
    font-size: 33px; 
    font-family: Helvetica; 
}

来源

2012-05-28 23:48:32 Steve

嘿，我想你想这个像

这是CSS部分

.logo{ 
    font-size: 33px; 
    font-family: Helvetica; 
    color:red; 
} 
.logo > span{ 
    color:blue; 
}

这是HTML部分

<div class="logo"> 
    Exam 
    <span>ple</span> 
</div>

现在检查现场演示http://jsfiddle.net/SyPfG/

来源

2012-05-29 06:13:16

我知道你已经接受了答案，但我想我会有助于使用jQuery这个方法，因为它可能对你或这个问题的未来读者有用。

HTML：

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

CSS：

.logo{ 
    color:blue; 
}

的jQuery：

$('.logo').each(function() { 
    $(this).html(
     $(this).html().substr(0, $(this).html().length-3) 
     + "<span style='color: red'>" 
     + $(this).html().substr(-3) 
     + "</span>"); 
});

DEMO

来源

2014-05-15 19:23:13

查看此页面是类似的回答：

Is it possible to apply CSS to half of a character?

来源

2015-02-02 11:31:53

是否可以使用CSS来改变半个字的颜色（标识名称）？

回答

相关问题