Question

我有一个名为Example的徽标名称。

我希望考试为蓝色，而文字为红色。

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

Answer 1

你可以将单个（我假设是一个跨度）分成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;
}

Answer 2

假设您可以修改标记，您可以重新包装文本：

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

CSS还没有用于访问n-th everything的机制。如果愿意，浏览器采用它需要时间 - 上面的示例将保持最佳支持。

Answer 3

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

Answer 4

嘿，我认为你想要像

一样

这是css Part

.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/

Answer 5

我知道你已经接受了答案，但我想我会使用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

Answer 6

即使不修改标记也是可能的：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
      display: inline-block;
      margin: 0;
      line-height: 1em; 
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 100px;
      background: linear-gradient(to right, #1c87c9 50%, #8ebf42 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>R</h1>
    <p>This is a character with half-style.</p>
  </body>
</html>

Answer 7

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

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

7 个答案: