투명 텍스트 클리핑에서 이모티콘 제외

이 CSS 트릭은 선형 구배 배경을 적용하고 텍스트에 클리핑하고 텍스트를 투명하게하여 링크에 깔끔한 호버 효과를 만듭니다. 그러나 이것은 예기치 않게 이모티콘에 영향을 미쳐 투명하게 만듭니다. 이것은 기술적으로 정확하지만 (이모지는 글리프 임) 항상 바람직한 것은 아닙니다.

이 기사는 솔루션을 탐구합니다. CSS font-variation-emoji 및 font-palette 특성은 CSS 글꼴 모듈 레벨 4에서 제안 된 반면 현재이 특정 문제에 적합하지 않습니다. 순수한 CSS 솔루션을 사용할 수없는 것 같습니다.

저자는 두 가지 해결 방법을 제안합니다.

1. JavaScript : WordPress 및 Twitter와 같은 대형 플랫폼은 이미지 기반 이모티콘 (종종 SVG)을 사용합니다. 텍스트 기반 이모티콘을 이미지로 바꾸면 투명성 효과가 방지됩니다. 이모티콘을 감지하고 교체하려면 사용자 정의 자바 스크립트가 필요합니다.

2. 포지셔닝 : 가장 간단한 솔루션은 이모티콘을 외부에 배치하는 것입니다.<a></a> 링크 태그. 이것은 CSS가 영향을 미치는 것을 방지합니다. 그러나 이것은 이모티콘이 링크 텍스트의 시작 또는 끝에 지속적으로 위치되는 경우에만 실용적입니다. 미드 링크 이모티콘은 도전을 제시합니다.

이 기사는 간단한 CSS 솔루션이 부족하지만 이러한 시나리오에서 이모티콘 스타일에 대한 제어의 필요성은 향후 CSS 개발을위한 잠재적 영역을 강조한다고 결론 지었다. 아래 이미지는 다음을 보여줍니다.

위 내용은 투명 텍스트 클리핑에서 이모티콘 제외의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!