Есть ли решение, как менять цвет элемента в зависимости от фона за ним?

Question

[nomta]

Есть фиксированный элемент. Нужно, чтобы при прокрутке страницы он менял свой цвет, подстраиваясь под фон и всегда оставаясь на контрасте. Пока для этого используются обычные вычисления позиции скролла, но это неудобно, так как при добавлении нового контента надо снова это прописывать, а хуже всего то, что на мобильных это поведение запаздывает (сбивается, если контент перестраивается при прокрутке). Вот думаю, а есть какой-нибудь инструмент, который бы оперативно вычислял цвет фона на определенных координатах экрана?

Answer 1

[Michael-Zhigulin]

Можете попробовать эту библиотеку:
BackgroundCheck
Вот пример с фиксированным элементом и скроллом:
Пример

Comments

[nomta]

Спасибо, как раз то, что нужно!

Answer 2

[Вова Дружаев]

Возможно стоит посмотреть в сторону background-blend-mode - но с поддержкой пока не все хорошо. Но можно найти полифилы под него

Answer 3

[Дмитрий]

Как вариант в css указать прозрачный фон
background: rgba(0,0,0,.5);

Comments

[nomta]

Спасибо, но это не то. Нужно, чтобы цвет элемента всегда был контрастным по отношению к фону.