배경과 투명 텍스트가 잘립니다.

Question

CSS를 사용하여 아래와 같이 배경에서 투명한 텍스트 자르기 효과를 만드는 방법이 있나요?

이미지가 텍스트를 대체하기 때문에 귀중한 SEO를 모두 잃는 것은 부끄러운 일입니다.

그림자가 먼저 생각났는데 아무것도 생각나지 않더라구요...

이 사진은 웹사이트 배경이며 절대 위치에 있는 <img> 태그

입니다.

Answer 1

이는 CSS로 달성할 수 있지만 더 나은 접근 방식은 SVG 마스크와 함께 인라인 SVG를 사용하는 것입니다. 이 접근 방식은 CSS에 비해 몇 가지 장점이 있습니다.

• 더 나은 브라우저 지원: IE10+, Chrome, Firefox, Safari...
• 스파이더가 SVG 콘텐츠를 크롤링할 수 있으므로 이는 SEO에 영향을 미치지 않습니다(Google은 2010년부터 SVG 콘텐츠를 색인화했습니다)

CodePen 데모: SVG 텍스트 마스킹

으아아아 으아아아

텍스트를 선택 및 검색 가능하게 만드는 것이 목표라면 해당 텍스트를 <defs> 标记之外。以下示例显示了一种使用 < 保留透明文本的方法使用> 태그에 포함해야 합니다.

으아아아 으아아아

Answer 2

CSS3을 구현할 수 있지만 모든 브라우저가 이를 지원하는 것은 아닙니다

배경 클립 사용: 텍스트 배경을 사용할 수 있지만 페이지 배경과 정렬되어야 합니다.

으아아아 으아아아