自动将字体颜色与背景进行对比 [英] Auto-contrast Font Color to Background

问题描述

我有一个领域的背景.底部是绿色，顶部是灰色.在背景上方有文字.文本是否有办法感知"背景是什么颜色，并以使其与众不同的方式对字体进行着色?

I have a background of a field. The bottom is green, the top is gray. There is text on top of the background. Is there a way for the text to "sense" what color the background is and to tint the font in a way to make it contrast?

例如，灰色天空上的文字将变亮，绿色字段上的文字将变暗，以使其更加可见.

For example, the the text over the gray sky would become brighter and the text over the green field would become darker, to make it more visible.

我可能在这方面已经走了很远，但是任何建议都值得赞赏. (请注意，我不是在寻找手动更改字体颜色的答案.)

I may be reaching pretty far on this one, but any suggestions are appreciated. (Please note, I am not looking for the answer to manually change the font colors.)

推荐答案

更多的是作为实验:

设置带有背景继承的文本，以获取基础的背景；然后将其剪切到文本上，然后对其应用一些过滤器:

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

小提琴

(仅在webkit中工作)

(Only working in webkit)

也请检查以下内容:

动画疯狂

对比动画

更新:我们有新的方法来处理此问题.使用mix-blend-mode: difference

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>

这篇关于自动将字体颜色与背景进行对比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！