模态框弹出时如何实现背景黑白化且模态框不受灰度滤镜影响？

嘿，这个问题我之前做项目时也踩过坑！核心原因就是CSS的filter属性会被子元素继承，所以直接给body加灰度滤镜，弹窗肯定会跟着变黑白。下面给你几个实用的解决思路，挑适合你项目的来用：

这个方法不用动页面结构，只需要修改overlay的CSS，把滤镜加在它的伪元素上，这样弹窗内容完全不受影响：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 100;
  /* 删掉原来的background，交给伪元素处理 */
}

/* 新增伪元素，作为带灰度滤镜的背景遮罩 */
.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7); /* 保留原来的半透明黑背景 */
  filter: grayscale(100%); /* 只给伪元素加灰度滤镜 */
  z-index: -1; /* 把伪元素放在弹窗内容的后面 */
}

原理很简单：伪元素会铺满整个视口，滤镜只作用在它身上，而弹窗内容在伪元素的上层（z-index更高），所以完全不会被灰度影响。同时overlay的fixed定位已经能阻止后台元素的交互——用户点击弹窗区域时，点击事件会被overlay捕获，后台元素根本接不到。

如果不想用伪元素，你可以把除了弹窗之外的所有页面内容放进一个容器里，比如<div class="page-wrapper">，然后只给这个容器加滤镜：

首先调整HTML结构：

<body>
  <div class="page-wrapper">
    <!-- 这里放原来的所有页面内容，包括触发弹窗的按钮 -->
  </div>
  <div class="overlay">
    <!-- 弹窗内容 -->
  </div>
</body>

然后写CSS：

/* 弹窗打开时给内容容器加这个类 */
.page-wrapper.grayscale {
  filter: grayscale(100%);
}

.overlay {
  /* 保留你原来的CSS */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0,0,0,0.7);
}

最后用JS控制：打开弹窗时给.page-wrapper加上.grayscale类，关闭弹窗时移除。因为弹窗不在内容容器里，所以不会被滤镜影响，同时overlay的层级更高，能挡住后台交互。

如果你的项目不需要兼容IE或者旧版浏览器，那backdrop-filter绝对是最省事的方案——它专门作用在元素后面的内容上，不会影响元素本身：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0,0,0,0.7);
  /* 新增这一行，直接让弹窗后面的内容变灰度 */
  backdrop-filter: grayscale(100%);
}

一行代码就搞定，既实现了背景灰度，弹窗也完全不受影响，还能阻止后台交互，简直完美！唯一要注意的是，backdrop-filter在一些旧浏览器里不支持，比如Chrome 70之前、Firefox 103之前的版本，所以得根据你的项目兼容需求来选。

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