콘텐츠를 복제하지 않고 CSS를 사용하여 이중 색상 텍스트를 어떻게 얻을 수 있습니까?

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 구조:

<div>

설명:

• #main 요소에 그라데이션이 적용되어 있습니다. 텍스트를 입력하세요.

• 요소에는 배경에 반전된 그라데이션이 적용되어 있으며 이는 텍스트의 배경색으로 설정됩니다.

• background-clip:text 속성은 배경 그라데이션을 텍스트 영역으로 제한합니다.
• -webkit- text-fill-color: transparent는 텍스트를 투명하게 하여 배경 그라데이션이 보이도록 합니다.

이 기술은 텍스트를 투명하게 만들어 이중 색상 텍스트 효과를 만들어냅니다. 중복된 콘텐츠가 필요합니다. 블렌딩 효과를 사용하면 추가 텍스트 요소 없이도 색상 간 원활한 전환이 가능합니다.

위 내용은 콘텐츠를 복제하지 않고 CSS를 사용하여 이중 색상 텍스트를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!