실제 텍스트에 배경 이미지/텍스처 사용?

Question

SVG에서이 작업을 보았습니다. 텍스트 채우기는 색상이 아닌 이미지입니다. CSS3를 사용하여 이러한 일이 가능할 지 궁금해했습니다.

나는 웹을 둘러 보았고, 텍스트 위에 이미지를 오버레이하는 근본적인 해결 방법을 발견했다. (this을 참조한다. 실제로 텍스트 배경 이미지가있는 것 외에도 배경 그라디언트가 가능합니까?

Answer 1

CSS3은 background-clip 속성을 추가합니다. -webkit-background-clip: text을 사용하면 실제로이 작업을 수행 할 수 있지만 text 값은 독점적이며 현재 은 Webkit 기반 브라우저 (Safari 및 Chrome)에서만 구현됩니다. -webkit-background-clip: text;를 사용

h1 { 
    font-size: 3em; 
    background: url('someimage.png'); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

몇 가지 기사 : 정말

• Gradient Text
• Animated background clip text
• Fun with -webkit-background-clip and @font-face

Answer 2

내가 무슨 말하는지 이해한다면, 아니요. CSS3의 불가사의 한 경이로움에도 불구하고 텍스트를 단색으로 만 설정할 수 있습니다.