固定于页面底部的Navbar文字随下方元素颜色反转实现求助

要让无背景的固定导航栏文字自动反转颜色，适配下方任意背景，你可以通过mix-blend-mode属性结合基础色设置来实现，之前没成功可能是缺少关键的颜色配置。

修改后的完整代码 #

HTML（无需改动）

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS（核心修改）

nav {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 1000;
}

ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0; /* 移除默认内边距，避免布局偏移 */
}

ul li {
    padding: 1rem;
}

ul li a {
    color: white; /* 设置基础白色，配合混合模式实现反转 */
    text-decoration: none;
    font-weight: 300;
    mix-blend-mode: difference; /* 关键属性：与背景颜色产生差值对比 */
    background-color: transparent; /* 确保无背景干扰混合效果 */
}

原理说明 #

• mix-blend-mode: difference：该属性会计算文字颜色与下方背景颜色的RGB通道差值，自动生成与背景对比强烈的文字颜色——当背景为深色时，白色文字会反转成深色；当背景为浅色时，白色文字会反转成深色，始终保证可读性。
• 基础色选白色是因为它与绝大多数背景色的差值对比最明显，也可以换成黑色，效果类似。
• 必须确保导航栏及链接元素无不透明背景，否则会遮挡下方内容，导致混合模式失效。

内容的提问来源于stack exchange，提问作者Jacob Consorti