У нас есть один URL-адрес изображения, который будет возвращать одно из нескольких внешних изображений, обозначающих статус развертывания (красное, желтое, зеленое, синее...).
Цель состоит в том, чтобы создать элемент div с зеленым фоном, если результирующее изображение будет зеленым, красным вместо красного и т. д. Стратегия состоит в том, чтобы «выбрать» крайнюю правую часть изображения, а затем обрезать и растянуть ее по всему изображению. фон div.
К сожалению, разные изображения статуса могут иметь разную ширину в зависимости от статуса. Таким образом, слова «проходит», «отменено», «не удалось» приводят к немного другой длине изображения. По этой причине попытки с background-size оказались безуспешными, поскольку для каждого изображения требуется вычисленное смещение в зависимости от ширины.
Приведенный ниже пример работает в некоторых случаях, но требует знания различной ширины изображений для расчета смещения (положения фона)
Положение дел: Результат:
Проблема в том, что нам нужно знать размер изображения, чтобы вычислить значения для background-size и background-position или изображения. Если мы установим фиксированный размер, мы получим неверную ссылку на позицию образца и увидим какой-то текст:
Есть ли лучший способ взять образец части изображения (скажем, X=width-5px, Y=5px), а затем растянуть этот образец пикселя по всему элементу div, не зная заранее ширину?
