HTML 및 CSS를 사용하여 텍스트 채우기 효과를 생성합니다.

사진에 글을 추가하면 당신의 사이트가 매우 좋아 보일 수 있습니다.이것은 독자의 주의력을 끄는 데 매우 도움이 된다.이것은 Adobe Photoshop/Illustrator의 유행 기술과 고전적인 효과입니다. 이것은 마스크를 잘라내는 기능 덕분입니다.이것은 이미지를 텍스트에 편집합니다. 이것은 실제 텍스트 바로 위에 있는 이미지 영역만 볼 수 있고 이미지가 텍스트 내부에 있는 착각을 일으킨다.이미지의 나머지 부분이 솔리드 채우기 레이어를 생성하는 뷰에서 숨겨집니다.CSS를 사용해도 같은 효과를 낼 수 있다.다음은 내가 그것을 어떻게 만들었는지.
우선, 나는 색인을 하나 만들었다.html 파일, ID가'title'인 h1 표시가 있습니다.
그 다음으로 나는 하나의 풍격을 창조했다.css 파일, 색인에 연결합니다.html.CSS에는 내 색인에서 온 태그, 클래스, id가 포함되어 있습니다.html는 몇 가지 기본 속성을 제공했다.
IDtitle가 my h1 의 위치이기 때문에 배경 클립 속성을 추가했습니다.
배경 클립 CSS 속성 설정 요소의 배경이 테두리 상자, 채우기 상자 또는 내용 상자 아래로 확장되는지 여부입니다.

background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

요소에 배경 이미지나 배경색이 없는 경우 이 속성은 경계에 투명 영역 또는 일부 불투명 영역 (경계 스타일 또는 경계 이미지 때문에) 이 있을 때만 시각적 효과를 가집니다.
코드 펜: https://codepen.io/iamdejean/pen/wvwjjer
github:https://github.com/iamdejean/Fill-text-with-image-using-CSS