[SCSS]글자에 패턴 넣기

자료용으로 만들어본 샘플 문구

.pattern {
  margin: 100px;
  text-align: center;
  font-size: 90px;
  font-family: "Fredoka";
  font-weight: 900;
}

SCSS, CSS로 글씨에 패턴을 입히는 것도 가능하다. 우선 굵은 글씨로 적어둔 뒤 Scss를 연다.

위 코드는 현재 설정이다.

 

1) 이제 color:transparent; -webkit-text-fill-color: transparent; 를 해준다.

2) 패턴으로 넣고 싶은 이미지를 찾거나 만들어 지정된 이미지 폴더에 미리 저장해둔다.

3) background: url();에 주소로 찾아둔 사진을 링크로 연결해 넣어준다.

4) background-clip: text; 로 바꿔주면 패턴이 텍스트 내부로 들어가는 것을 확인할 수 있다. 

 

완성 코드와 결과물은 다음과 같다.

.pattern {
  margin: 100px;
  text-align: center;
  font-size: 90px;
  font-family: "Fredoka";
  font-weight: 900;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: url(../images/diamond-zag.png);
  background-clip: text;
}

붉은 다이아몬드와 회색 패턴~

 

-webkit-text-stroke 같은 거 쓰면 테두리도 넣을 수 있음.

-webkit-text-stroke: 4px rgb(155, 9, 9);