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();
}
(Only working in webkit)
Check also this ones:
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>