24

我有一个领域的背景。底部是绿色，顶部是灰色。背景顶部有文字。有没有办法让文本“感知”背景是什么颜色并以某种方式对字体进行着色以使其形成对比？

例如，灰色天空上的文本会变得更亮，而绿色字段上的文本会变得更暗，以使其更明显。

我可能在这方面已经取得了相当大的进展，但任何建议都值得赞赏。（请注意，我不是在寻找手动更改字体颜色的答案。）

4

1 回答 1

29

更像是一个实验：

设置带背景的文字继承，得到底的背景；然后将其剪辑到文本中，然后对其应用一些过滤器：

.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: difference

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

于 2014-01-23T17:52:09.310 回答