뒤에 CSS를 사용하는 오버레이 텍스트

div에 오버레이 텍스트를 추가하려고합니다. 필요한 문자 수가 없으면 div에 오버레이 텍스트를 추가하려고합니다. http://jsfiddle.net/jason99/LYxmF/뒤에 CSS를 사용하는 오버레이 텍스트

처음 세 문자가 파란색으로하고 붉은 색에서 휴식을해야합니다

이 jsfiddle을 참조하십시오.

CSS 코드

.overlay-text { 
    color: blue; 
    z-index: 10; 
} 
.overlay-text:after { 
    position: absolute; 
    left: 0; 
    content: '******'; 
    color: red; 
}

HTML .overlay-text:after에서 position:absolute; left:0;을 제거하는

<span class="overlay-text">***</span>

출처

2014-07-24 Maximus

제거 위치 절대에서 왼쪽 : –

[바이올린]을 (http://jsfiddle.net/GopsAB/LYxmF/5/) 당신이 –

@ 제이슨를 사용할 수 있습니다 후 : 그냥 당신의 코멘트를 보았다 대답에. [이] (http://jsfiddle.net/LYxmF/7/)과 같은 것을 찾고 계십니까? – Harry

의사 요소에 음수 z- 인덱스를 추가하고 주 스팬과 관련하여 절대 인덱스를 배치하여이 효과를 얻을 수 있습니다.

.overlay-text { 
    color: blue; 
    z-index: 10; 
    position: relative; /* Added this */ 

} 
.overlay-text:after { 
    content: '******'; 
    color: red; 
    position: absolute; 
    left: 0; 
    z-index: -1; /* Added this */ 
}

참고 : 스팬의 문자 당신이에 단색 배경을 추가해야합니다 그래서 그들은이 종류의 *의 뒤에 보여줄 것 * 다른 경우

.overlay-text (흰색이라고 말함)
의사 요소에 음수 Z- 인덱스를 추가하면 선택할 수 없게되지만 요구 사항이 주어지면 괜찮을 것으로 생각됩니다.

Demo

출처

2014-07-24 07:15:28 Harry

설명과 함께 좋은 해결책을 편집했습니다. –

보십시오. 당신이 Demo

CSS처럼 .overlay-text에서 사용할 수 있습니다 필요한 경우 :

.overlay-text { 
    color: blue; 
    z-index: 10; 
    position: absolute; 
    left: 0; 
} 
.overlay-text:after { 
    content:'******'; 
    color: red; 
}

출처

2014-07-24 06:51:58

아니요, 그는 뭔가 다른 것을 의미했습니다. 그는 처음 세 캐릭터가 Z 지수를 설정하는 이유가 무엇인지 알아야합니다. 하지만 색상이 붕괴 –

'처음 세 글자가 올 것입니다 .' 나는 당신이 말하려고하는 것을 얻지 못합니까? 빨간색 txt와 겹쳐 야한다는 것을 의미 했습니까? –

@Kiran은 귀하의 바이올린에있는 문자를 계산합니다. – Maximus

FIDDLE

.overlay-text:before { 
    content: '###'; 
    color: blue; 
    position:relative; 
    } 
.overlay-text { 
    position: absolute; 
    left: 0; 
    content: '******'; 
    color: red; 
}

을 마지막으로 나는 당신의 질문을 이해하고 단지 위치를 추가 할 수 있습니다. 그것은 당신의 문제를 해결할 것입니다.

EDITDemo

이는 Z- 색인하고 위치를 invloves. 음의 z- 색인을 붙이십시오.

출처

2014-07-24 07:05:24

코드 @harry –

뒤에 CSS를 사용하는 오버레이 텍스트

답변

관련 문제