Mix-Blend-Mode：差异在标题中不起作用

编程问答 2022-05-30

问题描述

我一直在尝试弄清楚如何在不使用 JavaScript 的情况下在我的标题中的导航文本上使用混合模式。这就是我想要实现的目标：https://www.lizvwells.com/project/stonewall-forever

我认为它会简单得多，但我不确定为什么它不起作用。我在标题上没有背景图像或颜色，我只希望导航中的文本在用户滚动时与页面上的图像和文本混合。我试过在标题上添加“透明”颜色，没有添加，并尝试在导航 a 中添加混合混合模式，但这也不起作用。它唯一有效的时间是当我在标题标签上添加 mix-blend-mode 属性时，问题是它只在悬停（奇怪）时有效，但它只会将文本踢回图像后面。请帮忙！

这是我的代码：

<header>
  <nav>
    <div class="left">
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </div>

    <div class="right">
      <a href="index.html">Name</a>
    </div>
  </nav>
</header>

    header {
      position: fixed;
      display: flex;
      flex-direction: row;
      align-items: center;
      top: 0;
      left: 0;
      width: 100%;
      padding: 36px 36px 20px 36px;
      z-index: 2;
      
      background-color: transparent;
    }
    
    header div.left {
      font-size: 24px; 
      
      padding: 36px;
      
      position: absolute;
      top: 0;
      left: 0;
    }
    
    header div.right {
      font-size: 36px;
      
      padding: 36px;
      
      position: absolute;
      top: 0;
      right: 0;
    }
    
    nav {
      mix-blend-mode: difference;
    }
    
    nav a {
      margin: 0 0 0 16px;
      padding: 10px;
      height: 300px;
      width: 450px;
      font-size: 36px;
      color: #000000;
      
      font-variation-settings: "wght" 100,"wdth" 100;
      transition: font-variation-settings .2s;
    }
    
    nav a:hover {
      font-variation-settings: "wght" 500,"wdth" 200;
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptmix-blend-mode