使用mix-blend-mode时如何仅将背景转为黑白，不影响上层子元素

问题原因 #

mix-blend-mode 属于作用于全元素的渲染属性，添加在父元素.blank上时，会对该元素本身以及所有后代元素生效，因此你上层的.container也会被应用混合效果，导致整页变黑白。

解决方案 #

将背景图和混合模式独立放在父元素的伪元素上，和子元素做层级隔离即可，无需修改原有HTML结构：

代码修改 #

<!-- template 无需调整 -->
<div class="blank">
  <div class="container">
    <!-- 原有内容 -->
  </div>
</div>

.blank {
  position: relative; /* 新增，作为伪元素的定位父级 */
  display: flex;
  justify-content: center;
  height: 659px;
  background-size: cover;
  /* 把原背景和mix-blend-mode移到伪元素中 */

  &::before {
    content: "";
    position: absolute;
    inset: 0; /* 等价于top:0;right:0;bottom:0;left:0，铺满父元素 */
    background: url('../../assets/images/bg_gray.png') 100%;
    background-size: cover;
    mix-blend-mode: luminosity;
    z-index: 1; /* 背景伪元素层级低于内容区 */
  }

  & .container {
    position: relative; /* 新增，激活z-index */
    z-index: 2; /* 内容区层级更高，不会受伪元素混合模式影响 */
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

替代优化 #

如果你只是需要把背景图转为纯黑白效果，不需要和页面下层元素做混合，可以把伪元素的mix-blend-mode: luminosity替换为filter: grayscale(100%)，效果更稳定，不会和页面其他层级元素产生意外混合。

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