如何使用CSS :not属性避免Bootstrap模态框被模糊，或通过CSS+JS实现模态框背景模糊效果

首先要指出你当前CSS的核心问题：滤镜属性是会继承给子元素的，而且你原选择器的写法有语法错误。.modal fade是两个类名，正确的多类选择器应该写成.modal.fade，但即使修正了这个写法，因为模态框嵌套在container里面，container的滤镜还是会传递给它的所有子元素（包括模态框），所以:not选择器在这里无法达到预期效果。

下面给你两种可行的解决方案：

方案一：纯CSS修正（利用滤镜覆盖） #

既然父元素的滤镜会继承，那我们可以给模态框及其所有子元素强制取消滤镜，这样就能确保模态框清晰显示。修改你的CSS如下：

/* 给container添加模糊效果 */
.modal-open .container-fluid, 
.modal-open .container {
  -webkit-filter: blur(5px) grayscale(90%);
  filter: blur(5px) grayscale(90%);
}

/* 强制取消模态框及其子元素的滤镜，覆盖继承效果 */
.modal-open .modal,
.modal-open .modal * {
  -webkit-filter: none !important;
  filter: none !important;
}

这里的!important是为了确保这个样式能覆盖其他可能的滤镜设置，保证模态框不受影响。

方案二：CSS + JavaScript 精准控制 #

如果觉得纯CSS的继承覆盖不够优雅，可以用JS监听模态框的显示/隐藏事件，动态给目标容器添加/移除模糊类，这样逻辑更清晰：

第一步：添加CSS类 #

/* 定义模糊样式类 */
.blurred-bg {
  -webkit-filter: blur(5px) grayscale(90%);
  filter: blur(5px) grayscale(90%);
}

/* 确保模态框始终清晰 */
.modal {
  -webkit-filter: none;
  filter: none;
}

第二步：添加JavaScript监听 #

利用Bootstrap模态框的show.bs.modal和hidden.bs.modal事件来控制类的切换：

// 模态框显示时添加模糊类
$('#paymentModal').on('show.bs.modal', function() {
  $('.container, .container-fluid').addClass('blurred-bg');
});

// 模态框隐藏时移除模糊类
$('#paymentModal').on('hidden.bs.modal', function() {
  $('.container, .container-fluid').removeClass('blurred-bg');
});

这种方式的好处是只有在模态框打开时才会给背景添加模糊，关闭时立即恢复，性能更优，也避免了可能的样式冲突。

另外，检查一下你的模态框CSS代码，里面有一些语法错误（比如多余的闭合大括号、opacity: 100应该是opacity: 1），建议修正这些小问题，避免影响样式生效。

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