CSS 그라데이션을 사용하여 배경색을 기반으로 텍스트 색상을 동적으로 조정하려면 어떻게 해야 합니까?

다양한 배경에 대한 텍스트 색상 적용

진행률 표시줄 디자인을 추구하면서 기본 배경에 따라 텍스트 색상을 동적으로 조정하려고 합니다. 배경 색조. 구체적으로 밝은 배경 위에 검정/진회색 텍스트, 적당히 밝은 배경 위에 검정/진회색 텍스트, 어두운 배경 위에 흰색 텍스트를 목표로 합니다.

혼합 혼합 모드 및 기타 필터를 사용한 초기 시도 원하는 효과를 얻는 데 실패했습니다. 그러나 실행 가능한 솔루션은 혼합 혼합 모드에 의존하지 않고 텍스트 색상에 추가 그라데이션을 사용하는 것입니다.

향상된 CSS 스타일링

다음 CSS 코드를 구현하여 달성하세요. 원하는 텍스트 색상 적용:

.container {
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

HTML 마크업

.container 요소 내에서 텍스트 콘텐츠를 .text 요소로 묶습니다.

<div class="container">
  <div class="text">Some text here</div>
</div>

설명

.text 내의 추가 그라디언트는 투명 색상이 텍스트 채우기로 설정된 흰색에서 검은색으로 그라디언트를 설정합니다. 이렇게 하면 기본 배경이 텍스트와 혼합되어 원하는 색상 적응 효과를 얻을 수 있습니다.

위 내용은 CSS 그라데이션을 사용하여 배경색을 기반으로 텍스트 색상을 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!