CSS의 솔리드 스트로크가있는 투명 텍스트

내 몸에 배경 이미지 (보라색 종류의 그라디언트)가 있습니다. 페이지 중간에 텍스트가 있습니다. 텍스트를 투명하게 (예 : 보라색 그라디언트 표시)하고 싶지만 텍스트에 단색 1px 획을 표시하고 싶습니다.CSS의 솔리드 스트로크가있는 투명 텍스트

text-shadow: 1px 0 red, -1px 0 red, 0 1px red, 0 -1px red;

텍스트를 투명하게 만들면 그림자가 표시됩니다.

color: rgba(0,0,0,0);

는

opacity: 0;

물건뿐만 아니라 불투명 한 스트로크를한다 .. 텍스트를 통해 볼 수 있도록하지 않습니다.

아이디어가 있으십니까? CSS만으로 가능합니까?

편집 : 방금 텍스트 스트로크에 대해 읽었습니다. 그러나 유용한 것을 찾을 수 없습니다.

출처

2014-12-15 Mr.Wazowsky

사업부에서 포장 및 디스플레이'로의 div 테두리를 추가 : 인라인 block' 관련 –

을 : http://stackoverflow.com/questions/13932946/transparent-text-with -white-background-with-css –

> 나는 이것을 완전히 이해하지 못한다 : 이것을위한 인라인 블록. 브라우저가 요소를 렌더링하는 방법과 관련이 있습니다. (블록 또는 인라인 요소로). 어떻게하면 내 텍스트 (div가 아닌) 주위에 테두리를 만들 수 있습니까? 기본적으로 내가 원하는 것은 text-color : transparant; & 텍스트 테두리 : 1 픽셀 단색 흰색; (해당 태그가 맞지 않습니다.) > 이제 배경 클립이있는 관련 게시물을 시도해보십시오. < –

article h1 { 
color: rgba(0, 0, 0, 0.2); 
-webkit-text-stroke: 1px black;

}

출처

2014-12-15 13:37:33

이 코드의 기능에 대해 설명 하시겠습니까? –

웹의 글꼴은 벡터이므로 벡터처럼 편집 할 수 있습니다. 의미는 어도비 일러스트 레이터와 마찬가지로 스트로크를 추가합니다. 외부에 선/선이 추가됩니다. –

CSS의 솔리드 스트로크가있는 투명 텍스트

답변

관련 문제