CSS로 이중 색상 텍스트 구현

초기 쿼리:

다른 색상으로 텍스트 효과를 어떻게 얻을 수 있나요? 내용을 복제하지 않고 각 면에 색상을 지정합니까?

기존 접근 방식:

일반적인 방법은 두 개의 개별 텍스트 요소를 만들고 나란히 배치하는 것입니다. 고유한 배경 및 전경 색상.

대체 해결 방법:

콘텐츠 중복을 최소화하려면 background-clip:text와 같은 CSS 속성을 활용하는 것이 좋습니다. 이 속성을 사용하면 텍스트 자체에 그라데이션을 적용하여 다음을 활성화할 수 있습니다.

CSS 구현:

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

HTML 구조:

설명:
그라디언트는 텍스트를 둘러싸는 #main 요소에 적용됩니다. .
 요소에는 배경에 반전된 그라데이션이 적용되어 있으며 이는 텍스트의 배경색으로 설정됩니다.
 background-clip:text 속성은 배경 그라데이션을 텍스트로 제한합니다. Area.
-webkit-text-fill-color: transparent는 텍스트가 투명하여 배경 그라데이션이 보이도록 보장합니다.
이 기술은 이중 색상 텍스트를 만듭니다. 콘텐츠를 중복하지 않고도 효과를 얻을 수 있습니다. 블렌딩 효과를 사용하면 추가 텍스트 요소 없이도 색상 간 원활한 전환이 가능합니다.