是否可以使用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來改變半個字的顏色（標識名稱）？

回答

相關問題