CSS инверсия цвета

Question

Использование React & Styled-Components.

Как бы вы go решили следующий вопрос:

• Индикатор выполнения, красный или зеленый фон на основе%, пустая область - серый
• Процент текста справа от индикатора выполнения (всегда одно место)
• Цвет текста изменяется в зависимости от того, перекрывает ли его красный или зеленый фон

Конечный результат должен выглядеть следующим образом:

Что я придумал:

   export const BarContainer = styled.div`
      width: 100%;
      height: 30px;
      background: grey;
      border-radius: 16px;
    `;

    export const Bar = styled.div`
      background-color: ${props => props.background ? props.background : 'red'};
      width: ${props => (props.percent ? `${props.percent}%` : '0%')};
      height: 100%;
      transition: width 0.2s ease;
      &:before {
        color: #fff;
        font-size: 14px;
        content: ${props => (props.percent ? `'${props.percent}%'` : '0%')};
        display: block;
        text-align: right;
        mix-blend-mode: difference;
      }
    `;

... кое-где в коде

<BarContainer>
  <Bar percent={50} background="green" />
</BarContainer>

Проблема заключается в том, что режим смешивания-смешения: разница делает текст розовым, а не белым при наложении. он должен быть белым на оверлее, в противном случае черным.

Answer 1

Для вашего вопроса о позиции:

&:before {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); // vertical center
  width: 5em; // keep the number left aligned
  z-index: 1; // to stay above the color bar
}

Для вашего вопроса об изменении цвета текста:

Что вы имеете в виду, «перекрывает» его ? Потому что, если вы имеете в виду момент, когда он начинает перекрываться, то вы можете сделать что-то вроде:

color: ${props => props.percent > 98 ? 'white' : 'black'};

И вы можете получить больше фантазии и изменить цвет для каждой буквы за раз:

<div>
  <span>1</span>
  <span>0</span>
  <span>0</span>
  <span>%</span>
</div>

span {
  &:nth-child(0) {
    color: ${props => props.percent > 98 ? 'white' : 'black'};
  }
  &:nth-child(1) {
    color: ${props => props.percent > 98.1 ? 'white' : 'black'};
  }
  &:nth-child(2) {
    color: ${props => props.percent > 98.2 ? 'white' : 'black'};
  }
  &:nth-child(3) {
    color: ${props => props.percent > 98.3 ? 'white' : 'black'};
  }
}

Но если вы хотите, чтобы один символ имел несколько цветов одновременно, вам понадобится значок SVG для каждого числа.

Рассмотрите GreenSock , чтобы увидеть, может ли это помочь вы, у них есть некоторые действительно интересные функции.