배너 이미지

[CSS] 텍스트 꾸미기

최종 수정일 : (2년 전)
TWICE


TWICE
CHAEYOUNG


위 예시처럼 텍스트 배경에 그래디언트를 넣거나 이미지를 넣을 때 사용합니다.

#element {
-webkit-background-clip: text;
color: transparent;
}

보이는 것처럼, 꽤 간단하게 사용할 수 있습니다.

-webkit-background-clip이지만, Firefox에서도 작동합니다.

텍스트를 선택하면 배경이 변경되니, 위 예시처럼 user-select: none과 함께 사용하시는 걸 추천합니다.

또한, 위 예시처럼 복잡한 이미지를 배경으로 넣으면 굉장히 산만한 효과를 연출할 수 있기 때문에, 단순한 패턴이 반복되는 이미지를 사용하시는 게 제일 무난하지 싶습니다.


profile

이메일 주소는 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
카카오페이 qr코드 모바일이시라면 클릭