Автоконтраст Цвет шрифта для фона

Question

У меня есть фон поля. Дно зеленое, верхнее - серое. Наверху есть текст. Есть ли способ, чтобы текст «ощущал», какой цвет фона и оттеняет шрифт таким образом, чтобы он контрастировал?

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

Я, возможно, довольно далеко иду на этом, но любые предложения приветствуются. (Обратите внимание, что я не ищу ответа вручную изменить цвет шрифта.)

Answer 1

Больше как эксперимент, чем в противном случае:

Набор текста с фоном унаследовать, чтобы получить фон базы; затем закрепить его в текст, а затем применить несколько фильтров к нему:

.test { 
    width: 800x; 
    height:220px; 
    font-size: 200px; 
    background-image: url(bosque.jpg); 
    color: white; 
    position: relative; 
} 

.inner { 
    position: relative; 
    background-image: inherit; 
    -webkit-background-clip: text; 
    color: transparent; 
    -webkit-filter: invert() sepia(); 
} 

fiddle

(работает только в WebKit)

Проверьте также это те:

animated madness

contrast animation

UPDATE: У нас есть новые способы справиться с этим. Смотрите демо с помощью микс-Blend-режим: разница

div { 
 
    font-size: 300px; 
 
    color: gray; 
 
    mix-blend-mode: difference; 
 
} 
 
body { 
 
    background-image: url(http://placekitten.com/900/600); 
 
}

<div>TEST</div>