CSS 글자색에 배경이미지를 넣는다? 어떻게?

☝🏻어떤 속성을 사용해야 할까?

• color: transparent;
• background-image: url('이미지 경로');
• background-clip: text;
• -webkit-background-clip: text;

글자색으로 배경이미지를 적용하기 위해서는 먼저 글자가 원래 가지고 있는 색을 투명하게 만든다.

선택한 배경이미지를 삽입하는 background-image 속성으로 이미지를 적용해준다.
그 다음에는 배경을 글자에 칠하는 과정이 필요하다.
background-clip을 이용하면 텍스트를 이미지로 표현할 수 있다.

-webkit-은 웹 브라우저 엔진으로 구글, 사파리에서 CSS 속성을 적용할 수 있게 해준다. 난 사파리여서 그런지 background-clip까지만 입력하면 브라우저에 나오지 않아서 -webkit-을 적어주었더니 성공적으로 작동되었다!