728x90
See the Pen Text background clip by nah (@wimmwell) on CodePen.
이걸 뭐라고 설명해야하지?
아무튼 배경 이미지로부터 텍스트 모양대로 클립해서 배경은 감추고 텍스트에만 이미지가 들어가는 코드이다.
background-clip:text 속성으로 구현 가능하며,
나는 애니메이션 CSS와 제이쿼리를 이용해 마우스오버시 배경이미지와 텍스트가 바뀌게 응용해봤다.
728x90
'Front-end > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 가로로 긴 컨텐츠 스크롤 박스 만들기 (0) | 2022.12.23 |
|---|---|
| [HTML/CSS] CSS로 마름모 모양 텍스트박스 만들기 (0) | 2022.12.23 |
| [HTML/CSS] float:left 속성 없이 각 요소를 양측 끝에 정렬하기 - flex (0) | 2022.11.28 |
| 웹접근성 준수하여 웹접근성 인증 홈페이지 퍼블리싱 하기 (1) | 2022.11.25 |
| [Javascript] 전체화면 켜는 버튼 만들기 How to - fullscreen (0) | 2022.11.03 |
