Как автоматически сделать текст белым если фон тёмный и наоборот?

Question

[Дима Долготер]

есть фон. он меняется.на нем в одном месте есть ссылка с текстом. как понимать на каком фоне текст темном или светлом?

Comments

[Seanyr]

Какая цель? Сделать текст читаемым вне зависимости от фона?

[Дима Долготер]

Seanyr, конечно) text-shadow не предлагать))))

[Сергей Сергей]

css{ filter: contrast(1000%); }
это такой простецкий вариант для регулировки слайдером.

[Дима Долготер]

Сергей Сергей, да это манипуляция с картинкой. я бы мог псевдоэлемент подложить, но картинка должна остаться такой как есть)

[Сергей Сергей]

выбираем блок с текстом для анализа.
запоминаем цвет текста из computedStyle.
Как сделать скриншот элемента с помощью JS? - делаем скриншот блока с тектом.
https://habr.com/ru/post/419309/ - вычисляем средний цвет скриншота.
сравниваем цвет текста и средний цвет и решаем, чо делать.
Крутяк — если реализуется.

Answer 1

[Seanyr]

Есть такая интересная штука, как mix-blend-mode
Использовать можно например так:

Пример

здесь применяется просто разница цветов, но у него есть и куча других значений

Поддержка неплохая, только IE в пролете

Comments

[Дима Долготер]

хорошая штука. но заказчику не понравилось. спасибо)

[Seanyr]

SpiderPigAndCat, если есть под рукой дизайнер, шарящий в цветах, можно подобрать другое наложение, чтобы это хорошо смотрелось. А так, еще простой и симпатичный вариант, это полупрозрачный блок на котором будет располагаться текст.