프론트엔드-코드/CSS

글자색을 이미지나 그라데이션으로 하기

sdafdq 2023. 9. 26. 11:36
#ticket h2{ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right,red, purple); background-color: unset;}

우선, 뭔가 clip 기능 같은 것의 대상을 text로 설정한 다는 것이고,

텍스트를 채우는 데 그 color를 투명하게,

배경이미지는 실제로 url()해서 이미지로 해도 되고, 저렇게 그라디언트로 넣어도 된다. background-image 해서 할 수 있는 것은 다 되는 듯. 아니면 그냥 background-color도 되는 듯. 배경 뭐 해서 바꾸는 건 다 되는 듯

 

여튼 background-clip, 배경과 clip하는 대상(겹치는 부분만 보여주는)이 text라서, 

text-fill-color로 원래 텍스트 배경은 투명하게 한 데다, 배경과 텍스트가 겹치는 부분만 보여져서 글자는 투명색이지만 마치 글자에 텍스쳐가 입혀진 것 처럼 보임.

 

background-color:unset를 추가로 넣은 것은 위랑 겹치는 부분이 있어서 저렇게 한 거임. 신경 안써도 됨.

'프론트엔드-코드 > CSS' 카테고리의 다른 글

클래스 이름 규칙  (0) 2023.10.03
clip-path  (0) 2023.09.26
글자 투명하게  (0) 2023.09.26
sticky  (0) 2023.09.26
background-blend-mode 블랜드모드  (0) 2023.09.25