텍스트 블렌딩 배경 색상

당신은 다양한 왼손 색상으로 진행률을 스타일링하는 것을 목표로하며, 텍스트의 색상은 기본 배경을 기반으로 동적으로 조정해야합니다. 배경이지만 실패한 것으로 판명되었습니다. 또한 필터를 사용하는 고려 : Grayscale (1) Contrast (9);, 그러나 원하는 효과를 얻지 못했습니다.

Gradient Solution

효과적인 솔루션은 텍스트를 색칠하기위한 추가 기울기를 만드는 데 있습니다. 이 방법을 사용하면 믹스 블렌드 모드가 필요하지 않습니다.

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

. 컨테이너 { 너비 : 200px; 높이 : 20px; 배경 : 선형 등급 (오른쪽, #43A047 50%, #EEE 0); 텍스트 정렬 : 센터; } .텍스트 { 배경 : 선형 그레이드 (오른쪽, 흰색 50%, 검은 색 0); -webkit-background-clip : 텍스트; 배경 클립 : 텍스트; 색상 : 투명; -webkit-text-fill-color : 투명; 글꼴 중량 : 대담한; }

.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;
}

이 접근법은 텍스트 색상이 검은 색 (어두운 왼쪽 섹션)과 흰색 (더 가벼운 왼쪽 섹션) 사이에서 전환되도록합니다.