我有一个领域的背景。底部是绿色的,顶部是灰色的。背景之上有文字。有没有一种方法可以让文本“感知”背景的颜色并以某种方式对字体进行着色以使其形成对比?
例如,灰色天空上的文字会变得更亮,绿色田野上的文字会变得更暗,以使其更加明显。
我可能在这方面做得很远,但欢迎任何建议。 (请注意,我不是在寻找手动更改字体颜色的答案。)
最佳答案
与其说是实验,不如说是实验:
设置带有背景的文本inherit,获取base的背景;然后将其剪辑到文本中,然后对其应用一些过滤器:
.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>
关于css - 自动将字体颜色与背景进行对比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21290669/