jquery - 如何确定可见底层元素的背景颜色？

Question

我有一个固定位置“转到顶部”的页面<a>当用户滚动时，它会粘在页面底部。它位于页面的页脚 DIV 中，如下所示:

.pagedown div a { position: fixed; margin-left: 8px;  margin-top: 50px; width: 44px; height: 40px; color: #bd1300; background: none;}

<div class="footer"><a id="gototop" title="Go to top!" href="#">^</a></div>

使用 jQuery 或 JS 我希望能够更改 <a> 的颜色基于真实的底层背景颜色。到目前为止，我已经看过这里:

How do I detect the inherited background-color of an element using jQuery/JS?

此代码似乎不适用于我的用例。也许自从 <a>当页面滚动时，问题是否真的不是页面 DOM 其余部分的“内部”？

那么:有没有办法检测“真实”的底层背景颜色(即用户在视口(viewport)中实际看到的背景颜色)？

Answer 1

支持不是很好(没有 IE)，但你可以使用 CSS 来实现。

mix-blend-mode @ MDN

.footer {
  font-size: 72px;
  text-align: center;
  margin-bottom: 10px;
  line-height: 100px
}
a {
  color: white;
  mix-blend-mode: difference;
}
body {
  background: red;
}

<div class="footer"><a class="gototop" title="Go to top!" href="#">^</a>
</div>

.footer {
  font-size: 72px;
  text-align: center;
  margin-bottom: 10px;
  line-height: 100px
}
a {
  color: white;
  mix-blend-mode: difference;
}
body {
  background: blue;
}

<div class="footer"><a class="gototop" title="Go to top!" href="#">^</a>
</div>