我有一个领域的背景。底部是绿色,顶部是灰色。上面有文本。是否有一种方法让文本“感知”背景的颜色并使字体变色,以增强对比度?
例如,灰色天空上的文本会变得更亮,而绿色田野上的文本会变得更暗,以使其更加可见。
我可能在这个问题上追求得有点远,但我很感谢任何建议。(请注意,我不是寻找手动更改字体颜色的答案。)
我有一个领域的背景。底部是绿色,顶部是灰色。上面有文本。是否有一种方法让文本“感知”背景的颜色并使字体变色,以增强对比度?
例如,灰色天空上的文本会变得更亮,而绿色田野上的文本会变得更暗,以使其更加可见。
我可能在这个问题上追求得有点远,但我很感谢任何建议。(请注意,我不是寻找手动更改字体颜色的答案。)
更多是一次实验,而非其他:
将文本的背景设置为inherit,以获取基础背景;然后将其剪裁到文本,并应用一些过滤器:
.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>
mix-blend-mode
]在目前还没有得到很好的支持。(http://caniuse.com/#feat=css-mixblendmode) - Nathan Arthur<div>
本身同时承载随机的 background-color
和文本 color
... mix-blend-mode
不起作用(我原以为它会起作用)。 - vsync
color-contrast()
看起来最终将提供一种强大的方法来实现这一点:规范 | 更多示例。 - Tim M.