CSS 만 사용하는 멀티 컬러 텍스트

Question

내 제목이 일관되게 문제를 표현했는지는 모르지만 아래에서 설명 드리겠습니다.

나는 만 CSS를 사용하여 텍스트 문자열에서 각 문자에 다른 색을 지정하고 싶습니다. http://codepen.io/Connor3xL/pen/ZOyzJK

내가 이것을 사용할 수 없으며 비트 어쨌든이 소요 시간 :

더 설명 내 문제의 영상을 보려면 I이 원하는 만이 사용할 수 있습니다

<!--I don't want this, and I cannot use it--> 
<span style="font-family: tahoma"> 
<span style="color: red">U</span> 
<span style="color: blue">s</span> 
<span style="color: red">e</span> 
<span style="color: blue">r</span> 
<span style="color: red">n</span> 
<span style="color: blue">a</span> 
<span style="color: red">m</span> 
<span style="color: blue">e</span> 
</span> 

:

를

<span class="username">Username</div> 

여기서 "username"은 CSS에 의해 정의됩니다. 그 CSS는 내가 필요한 것입니다. 이것은 분명히 HTML 버전과 동일한 효과가 있습니다.

Xenforo Usernames에서이 코드를 사용하고 있기 때문에 CSS에서만 사용해야하는 이유가 있습니다. 나는 전에 그것을 한 것을 보았다. 그래서 나는 그것이 아주 잘 가능하다는 것을 안다. 나는 약 30 분 동안 봤는데, 그라디언트로 실험했는데, 그것을 복제 할 수 없었다. 누군가가 도와 줄 수 있기를 바랍니다.

Answer 1

벙어리 CSS 유일한 솔루션 - 별도의 <span>로 각 문자를 넣어 필요로하는 곳에 그래서 당신은 사용할 수 있습니다 :nth-child(2n+1)

.username span { 
 
    color: red; 
 
} 
 
.username span:nth-child(2n+1) { 
 
    color: blue; 
 
}

<span class="username"><span>U</span><span>s</span><span>e</span><span>r</span><span>n</span><span>a</span><span>m</span><span>e</span></span>

또는

당신은 같은 작은 자바 스크립트를 사용할 수 있습니다 Ryan Rodemoyer에 제안되었습니다.답 :

var message = "The quick brown fox."; 
 
var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue 
 
for (var i = 0; i < message.length; i++) 
 
    document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");

또는

어쩌면 당신은 this

Answer 2

이 같은 것을 찾고은 몇 가지주의와 비록 단지 CSS로 달성 될 수있다 :

,
• 고정 폭 글꼴이 원하는 텍스트를 CSS로 통과해야
• 를 사용해야합니다

일반적인 원칙은 다음과 같습니다

• 출력 전체 단어 원하는 기본 색상
• 사용에 대체 색상을 출력하기 위해 절대적으로 배치 된 의사 요소입니다. 원하는 문자를 지정하고 기본 색상으로 남아있는 문자에 공백을 사용하여 수행합니다.

고정 폭 글꼴의 문자가 같은 크기의 공간을 차지하므로이 문자가 올바른 위치에 있는지 확인할 수 있습니다. 절대 위치 지정을 사용하면 글자를 HTML에 설정된 단어 위에 놓을 수 있습니다.

JS Fiddle