3

Exampleというロゴ名があります。

試験を青にし、ファイルを赤にします。

：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>
    <頭>
        <title> </ title>
        <スタイル>
h1 {
    フォントサイズ：0;
}
h1：前{
    コンテンツ：'例';
    色：＃0000ff;
    フォントサイズ：32px;
}
h1：after {
    コンテンツ：'le';
    色：＃ff0000;
    フォントサイズ：32px;
}
        </ style>
    </ head>
    <本体>
        <h1>例</h1>
    </ body>
</ 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

ねえ、私はあなたが好きなようにこれをしたいと思います

これは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

あなたがすでに答えを受け入れていることは知っていますが、あなたやこの質問の将来の読者に役立つかもしれないので、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

マークアップを変更しなくても可能です。

<!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 に答える