我如何确定可见底层元素的背景颜色？ [英] How do I determine background color of visible underlying element?

问题描述

我有一个固定位置的页面'go to top'< a> ，它随着用户的滚动而粘在页面的底部。它位于页面的页脚DIV中，如下所示：

  .pagedown div a {position：fixed; margin-left：8px; margin-top：50px;宽度：44px; height：40px;颜色：＃bd1300;背景：无;} 
 
< div class =footer>< a id =gototoptitle =回到顶部！ HREF = ＃ > ^< / A>< / DIV> 
  

使用jQuery或JS我希望能够改变< a>< / code>根据真实的底层背景颜色。到目前为止，我在这里看过：

这段代码似乎不适用于我的用例。也许是因为问题中的< a> 并不真的在页面的其余部分内部滚动？

所以：有没有办法来检测底层背景颜色（即用户实际在视口中看到的背景颜色）？

解决方案

支持不是很好（没有IE），但你可以使用CSS。 /developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-moderel =nofollow> 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 =gototoptitle =回到顶部！ href =＃> ^< / a>< / div>  

$ b

  .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 =gototoptitle =回到顶部！ href =＃> ^< / a>< / div>  

I have a page with a fixed position 'go to top' <a> which sticks to the bottom of the page as the user scrolls. It's in the footer DIV of the page like so:

.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>

Using jQuery or JS I would like to be able to change the color of the <a> based on the true underlying background color. So far, I've looked here:

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

This code doesn't seem to work for my use case. Perhaps since the <a> in question is not really 'inside of' the rest of the page DOM as it scrolls by?

So: is there a way to detect the -true- underlying background color (ie. the background color the user would actually see in the viewport)?

解决方案

Support is not great (no IE) but you can use CSS for this.

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>

这篇关于我如何确定可见底层元素的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！