크로스 브라우저 투명한 글자

Question

나는 블로그를 만들고 있는데, 블로그 맨 위에는 가장 최근의 블로그 게시물의 텍스트 위에 뉴욕시의 그림을 사용하는 장면이 있습니다. 글자에 윤곽선이 있으면 정말 멋지 겠지만 여전히 투명하여 이미지를 볼 수 있습니다.

투명 그림자가있는 문자 - 그림자를 시도했지만 검은 글자를 얻었습니다. (예상하지 못했지만 의미가 있습니다.) 브라우저가 아닌 webkit-text-stroke 속성을 사용하여 종료되었습니다. 크롬과 파이어 폭스 모두에 텍스트 그림자가있는 이미지를 첨부하여 색상이없는 텍스트 그림자가 나타나는 모습을 볼 수 있습니다.

현대적인 브라우저에서 원하는 효과 (텍스트 주위의 테두리, 색상 없음)를 얻을 수있는 방법이 있습니까? IE9 이하에서는 단색 검정을 사용합니다.

figcaption { 
    position: absolute; 
    bottom: 0px; 
    left: 20px; 
    font-size: 90px; 
    color: transparent; 
    -webkit-text-stroke-width: 5px; 
    -webkit-text-stroke-color: #1F1F1F; 
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);} 

감사합니다 :

이

내가 아래의 효과를 얻기 위해 사용하고 코드입니다.

Answer 1

몇 가지 생각.

이 예제에서는 설명하지 정확히,하지만 결과는 좋은 잘 크로스 브라우저 작동합니다 :
http://jsfiddle.net/panchroma/JHvgp/

주요 CSS는 또한

h1.figcaption { 
color:white; 
position: absolute; 
bottom: 0px; 
left: 20px; 
font-size: 90px; 
opacity: 0.35; 
filter: alpha(opacity=35); 
text-shadow: 2px 2px 2px #000; 
} 

이다, 어쩌면 그것은이다 sIFR와 함께 뭔가를 할 수 있습니다 ... 이것에 대해서는 확실하지 않습니다.

행운을 빈다.

편집 아래 Adrien Be에서

좋은 제안 - 개선 된 크로스 브라우저 투명성 코드 :
내가 찾던하지만이 작업 할 수 없음을 정확하게 http://css-tricks.com/snippets/css/cross-browser-opacity/

Answer 2

은 [여기 진짜 즉시 사용 가능한 솔루션이 없다; 하지만 내 생각은 코멘트를 너무 오래 받고, 그래서 여기에이 퍼팅 실례합니다.] 달성하기 좀 어려운

---

크로스 브라우저. 나는 이런 종류의 효과를 얻는 방법을 살펴 봤으며 (그리고 웹킷 만 사용하는 것에 만족하지 못했다.) 나는 동적으로 생성 된 Canvas 나 SVG 이미지를 사용하여 텍스트를 그리는 것과 같은 것을 생각해 냈다. 알파 값 (캔버스)을 조작하거나 마스크/필터 효과 (SVG)를 적용합니다.

하지만 글꼴 렌더링/위치 지정을 올바르게 수행하려면 약간의 어려움이 있습니다. 텍스트가 여러 줄로 넘겨지면 훨씬 더 복잡해집니다. 내가 찾은 가장 좋은 방법은 복수 단어 span으로 텍스트를 나눠서 각 단어마다 하나씩 추출하는 것입니다. 그 단어를 포함하는 Canvas 또는 SVG 이미지를 span 요소의 배경 이미지로 배치합니다. 여기서 큰 이점 : 브라우저는 텍스트를 새 라인 등으로 나눌 위치와 같은 텍스트 흐름을 처리합니다. 캔버스 또는 SVG에서 구현하기가 번거롭기 때문입니다. 텍스트가 표시되는 영역이 변경되면 (예 : 사용자 크기 조정 브라우저 창) 텍스트 흐름도 자동으로 조정됩니다. 약간의 추가 처리가 필요한 것은 효과가 적용된 후에 텍스트 크기 조정을 처리하는 것입니다. 사용자가 브라우저에서 글꼴 크기를 변경하면 이미지에 그린 텍스트가 더 이상 맞지 않을 수 있습니다. SVG 및 비교적 자동으로 처리 할 수있는 상대 단위를 사용하지만 게다가. 다른 해결 방법은 background-size을 사용하여 배경 이미지를 단어가 포함 된 범위의 크기로 조절하거나 크기 조절 "이벤트"를 캡처하여 이미지를 동적으로 다시 그립니다.

배경 이미지를 사용하면 원본 HTML 텍스트를 그대로 유지할 수 있다는 장점이 있습니다. 즉, 원래의 텍스트를 transparent으로 설정하면 f.e. 페이지에서 텍스트를 선택하기 시작합니다. 실제 텍스트로 계속 나타나며 복사 가능한 &입니다.

---

그러나 이런 작은 효과가 ... 작업 꽤 많은입니다

은 그래서 웹킷 같은 쉬운 솔루션에 대한 브라우저 지원까지 "투명 문자"를 사용하여 해당 포기 결국 결정 및 연기 너는 더 넓어졌다.