将 css mix-blend-mode 与位置固定元素的子元素一起使用答案

【问题标题】：Using css mix-blend-mode with a child of a position fixed element将 css mix-blend-mode 与位置固定元素的子元素一起使用
【发布时间】：2019-06-11 22:06:02
【问题描述】：

我想在 position:fixed 元素内设置锚点的混合模式，但未应用。

如果我将混合模式应用于父元素，它可以工作，或者如果我将父元素设置为position:absolute，它也可以工作，但这些都不是我想要实现的。

带有三个示例的 Codepen，我希望 #nav 看起来像带有现有 html 的 #nav2 和 #nav3。

http://codepen.io/wesdeboer/pen/QjawYv

HTML

<body>
  <div id="nav">
    <a href="">fixed</a>
  </div>
  <div id="nav2">
    <a href="">absolute</a>
  </div>
  <div id="nav3">
    <a href="">parent</a>
  </div>
</body>

CSS

body { background: url(http://lorempixel.com/400/200)}
#nav {
  position: fixed;
  top:0;
  left: 0;
}
#nav2 {
  position: absolute;
  top:0;
  left: 100px;
}
#nav3 {
  position: fixed;
  top: 0;
  left: 250px;
  mix-blend-mode: difference;
}
a {
  color: white;
  font-weight: bold;
  font-size: 32px;
  mix-blend-mode: difference;
}

在 Chrome 45 中测试

【问题讨论】：

我也无法使用 mix-blend-mode 来处理固定位置元素的子元素。我的解决方法是将孩子提升一个级别并固定每个孩子的位置，但这并不理想，因为需要 JS 来定位它们。

标签： css

【解决方案1】：

父元素上的position: fixed; 阻止mix-blend-mode 的行为与您期望的一样的原因是position: fixed; creates a new stacking context，将子元素与文档的其余部分隔离开来。

我验证了这确实是forking your example 的问题，并创建了一个新的导航项，它以不同的方式创建了一个新的堆叠上下文：通过绝对定位它并设置z-index。这个新的堆叠上下文可以防止子元素与堆叠上下文之外的背景图像混合，就像我们观察到的position: fixed; 元素一样。

position: fixed; 和position: absolute; z-index: 3; 只是many ways to create a new stacking context 中的两个，所有这些都应该造成这个问题：

具有position 值absolute 或relative 和z-index 值而不是auto 的元素。

具有position 值fixed 或sticky 的元素（对所有移动浏览器都具有粘性，但不适用于旧版桌面）。

元素是 flex (flexbox) 容器的子元素，其 z-index 值不是 auto。

元素是网格 (grid) 容器的子元素，其 z-index 值不是 auto。

opacity 值小于1 的元素（请参阅the specification for opacity）。

具有mix-blend-mode 值而不是normal 的元素。

具有以下任何属性且值不是none 的元素：

transform

filter

perspective

clip-path

mask / mask-image / mask-border

具有isolation 值isolate 的元素。

具有-webkit-overflow-scrolling 值touch 的元素。

具有will-change 值的元素指定任何会在非初始值上创建堆叠上下文的属性（请参阅this post）。

contain 值为 layout 或 paint 或包含其中任何一个的复合值（即 contain: strict、contain: content）的元素。

您绕过此限制的选项包括：

找到一种方法来定位/设置不会导致新堆叠上下文的父级。
将有问题的样式/定位应用于子级而不是父级；即，使用fixed 定位单个孩子。
将mix-blend-mode 应用于已创建新堆栈上下文的父级而不是该堆栈上下文的子级。
将背景图片应用到已创建新堆叠上下文的父级并调整大小/定位以与现有背景图片对齐。

【讨论】：