Auto-contrast Font Color to Background

Question

I have a background of a field. The bottom is green, the top is gray. There is text on top of the background. Is there a way for the text to \"sense\" what color the background

Answer 1

More as an experiment than otherwise:

Set the text with a background inherit, to get the background of the base; then clip it to the text, and then apply some filters to it:

.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

(Only working in webkit)

Check also this ones:

animated madness

contrast animation

UPDATE: We have new ways to handle this. See a demo using mix-blend-mode: difference

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

<div>TEST</div>