自动对比字体颜色到背景

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();
}

小提琴

(仅在webkit中工作)

检查这些:

动画疯狂

对比动画

更新:我们有新的方法来处理这个问题.使用mix-blend-mode查看演示:差异

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

<div>TEST</div>