3

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

我希望 Exam 是蓝色的，le 是红色的。

我知道您可以使用 :first-letter 但我最多需要更改 4 个字符。这是唯一阻止我制作纯 CSS 徽标而不是使用图像的东西。

4

7 回答 7

5

您可以将单个（我假设是一个跨度）拆分为 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-28T23:48:32.320 回答
2 
<!doctype html>
<html>
    <头部>
        <标题></标题>
        <风格>
h1 {
    字体大小：0；
}
h1：之前{
    内容：'示例'；
    颜色：#0000ff；
    字体大小：32px；
}
h1：在{之后
    内容：“乐”；
    颜色：#ff0000；
    字体大小：32px；
}
        </style>
    </head>
    <正文>
        <h1>示例</h1>
    </正文>
</html>
于 2012-05-29T00:16:24.170 回答
1

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

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

CSS 还没有访问第 n 个所有内容的机制。如果可以，浏览器将需要时间来采用它——上面的示例将仍然得到最好的支持。

于 2012-05-28T23:44:37.057 回答
0

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

演示

于 2014-05-15T19:23:13.660 回答
0

嘿，我想你想这样

这是 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-29T06:13:16.830 回答
0

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

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

于 2020-02-27T18:03:27.813 回答
-1

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

于 2012-05-28T23:46:07.007 回答