javascript - 有没有办法检测是否有较低 z-index 中的图像？

Question

我们的网站有一个典型的多级下拉菜单。所以它位于高 z-index 的固定 DIV 上。 (例如 Wordpress 管理员。每个链接的文本颜色都是黑色和透明背景。)问题是在某些页面上，这些菜单项很难阅读，因为下面可能有图像，所以透明背景使文本模糊不清。

有没有办法让菜单项检测到在同一位置的较低 z-index 处有图像(或具有类似深色的 div)？这样，我就可以使用 JS 或 jQuery 有条件地将那些特定页面上的那些菜单项设置为浅色。

在 CSS 中有 mix-blend-mode 属性，它不适用于图像，但这正是我正在寻找的——一种检测底层颜色并相应地调整文本颜色的方法以便始终清晰可辨。

Answer 1

仅使用 javascript，您可以从这里开始:Getting the z-index of a DIV in JavaScript?

因为您想一次找到多个元素的 z-index，如果您使用 jQuery 会更容易，请参见此处:https://api.jqueryui.com/zIndex/

使用 jQuery，您可以选择落入由下图边界框定义的屏幕特定区域并具有更大 z-index 值的元素，并向它们添加一个类以消除透明质量。

正如@charlietfl 在评论中指出的那样，要完成一些可以更简单地实现的事情，需要做大量的工作。