[CSS] 텍스트에 특정배경이미지를 마스킹하는 CSS

배경 클립 텍스트 배경 및 그라디언트

 

 

h1 {
  background:url(image_url_here);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}   

 

 

더 자세한 내용은 아래 링크를 클릭하셔서 보세요.

 

 

 

이 CSS 문법의 가장 큰 단점이 하나 있습니다.

 

바로 웹킷브라우저에서만 작동가능하다는 것~!

 

아직까지는 익스때문에는 활용되기 어렵겠네요.

 

하지만, 모바일 전용 사이트라면 충분히 멋진 기법일 것 같습니다. 

 

 

 

 

2014.11.27.