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

배경 색상 위에 텍스트 혼합

진행률 표시줄의 스타일을 다양한 왼쪽 색상으로 지정하고 텍스트 색상은 기본 배경에 따라 동적으로 조정되어야 합니다.

혼합 혼합 모드 시도

처음에 혼합 혼합 모드를 실험하셨습니다. 텍스트 색상을 배경과 혼합하는 데 차이가 있었지만 성공하지 못했습니다. 또한 필터: greyscale(1) Contrast(9); 사용을 고려했지만 이 역시 원하는 효과를 얻지 못했습니다.

그라디언트 솔루션

효과적인 솔루션은 추가 그라디언트를 만드는 데 있습니다. 텍스트에 색상을 지정합니다. 이 방법을 사용하면 혼합 혼합 모드가 필요하지 않습니다.

사용자 정의 CSS 코드는 이 그라데이션 재정의를 달성합니다.

.container {
  width: 200px;
  height: 20px;
  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;
}

이 접근 방식을 사용하면 텍스트 색상이 검정색( 어두운 왼쪽 섹션) 및 흰색(밝은 왼쪽 섹션).

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