[CSS]텍스트에 그라데이션, 이미지 적용하기

위 사진과 같이 이미지가 아닌 텍스트 파일에 그라데이션 또는 이미지를 적용하는 방법을 정리하려고 합니다.

     <div class="logo">
        Drawing With You
      </div>

 .logo{
 	color: transparent;
 	background: linear-gradient(rgba(112,255,238,.68), rgba(255,82,200,.68));
   	background-clip: text;
 	-webkit-background-clip: text;
 }

background에 원하는 색, 그라데이션, 이미지를 넣고 background-clip을 사용해주면 됩니다.

---

background-clip

요소의 배경이 테두리, 안쪽여백, 콘텐츠 상자, 텍스트 중 어디까지 차지할 지 지정

 

color를 투명으로 지정하는 이유

텍스트에 색상이 적용되어있으면 뒤의 배경이 보이지 않기 때문입니다!

 

 

순서를 잘 지켜주셔야해요! 배경을 먼저 적용 후 background-clip을 해주셔야합니다.

---

이미지로 텍스트을 적용하고 싶으면 background-img를 설정후 clip 해주시면 됩니다!

 

접근성 문제

이미지가 로드되지 않으면 텍스트를 읽을 수 없을 수 있습니다.

혹시 이미지가 로드되지 않았을때를 대비해서 background-color를 적용후 이미지 없이 테스트해야합니다.