Question

所以我在一个网站上有一个固定的透明标题菜单，其全宽/高图像为黑色＆amp;白色照片。我想知道是否有一种方法（使用纯CSS或某种JS实现）总是让菜单文本的颜色与任何滚动位置的背景颜色相反基本上，这些照片在不同的地方从非常亮到非常暗，所以当你滚动的时候，如果我总是白色或总是黑色的话，很难看到大部分卷轴的菜单。

有没有办法实现这个？

Answer 1

mix-blend-mode可以选择吗？ ...虽然没有最好的浏览器支持

＆＃13;

body {
  background: url(http://farm4.staticflickr.com/3694/8959572838_57fa40bdb4_c.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

div {
  font-size: 140px;
  text-align: center;
  color: white;
  mix-blend-mode: exclusion;
}

＆＃13;

<div>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
</div>

＆＃13;

添加了黑白样本

＆＃13;

body {
  background: url(https://i.stack.imgur.com/8rKUn.png) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

div {
  font-size: 140px;
  text-align: center;
  color: white;
  mix-blend-mode: exclusion;
}

＆＃13;

<div>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
</div>

＆＃13;

Answer 2

tl;博士：是的。

...

如果我需要实现这一点，这就是我想要的思考过程，所以也许你需要将你的问题分成子问题并搜索那些：

css无法检查，javascript即可。因此，第一步是研究Javascript解决方案。

接下来要回答的问题是如何在页面上的某个位置上的任何点进行颜色标注：Get pixel color from canvas, on mouseover。从这个问题来看，非常酷的jsfiddle，看看吧。

接下来要回答的问题是如何挑选相反的颜色＆＃39; （总是一个有趣的编程练习）：JS function to calculate complementary colour?

接下来要回答的问题是，何时调用此更新功能（滚动时），它非常直接，您可以找到很多教程。

最后一步是将颜色代码应用于元素＆＃39;你想要更新的风格。我认为这不是你现在质疑的。

祝你好运！

文本颜色总是与背景图像颜色相反？

2 个答案: