Bootstrap模态框打开时无法实现背景模糊问题求助

你遇到的问题核心是：Bootstrap 默认的 .modal-backdrop 自带 rgba(0,0,0,.5) 的半黑色背景，这个背景层会完全覆盖在页面内容之上，导致 backdrop-filter 无法作用到背后的页面内容——滤镜效果是有的，但被遮罩层自己的背景挡住了，所以肉眼看不到。

解决方法很简单，调整遮罩层的背景色，让背后的内容能“透”出来，同时保留模糊滤镜：

.modal-backdrop {
  /* 调淡背景色，或者直接设为 transparent 完全透明 */
  background-color: rgba(0, 0, 0, 0.2);
  /* 添加模糊滤镜 */
  backdrop-filter: blur(5px);
}

如果想要更纯粹的模糊效果，去掉背景色也可以：

.modal-backdrop {
  background-color: transparent;
  backdrop-filter: blur(8px);
}

注意：如果你的模态框内容区域（.modal-content）没有设置背景色，可能会导致内容也受到模糊影响，所以确保 .modal-content 保留默认的白色背景：

.modal-content {
  background-color: #fff; /* 确保内容区域不透明 */
}

这样修改后，模态框打开时，背后的页面内容就会呈现模糊效果，同时遮罩层的暗化（如果保留淡背景色）也能区分模态框和背景内容。

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