Bootstrap 5 Offcanvas 导航栏菜单的模糊背景答案

【问题标题】：Blurry Backdrop for Bootstrap 5 Offcanvas Navbar MenuBootstrap 5 Offcanvas 导航栏菜单的模糊背景
【发布时间】：2022-10-20 16:42:47
【问题描述】：

我正在使用 Bootstrap v5.2 并尝试复制以下图像。

Blurry Sidebar Backdrop

根据 MDN 文档，背景过滤器用于模糊元素的背景。

.offcanvas-backdrop {
    backdrop-filter: blur(10px); 
    -webkit-filter: blur(10px);
}

但是，这不起作用，所以我尝试使用 CSS 过滤器：

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

.offcanvas-backdrop{
    filter: blur(10px);
    -webkit-filter:blur(10px);
    filter: url($blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}

但这也没有用。

我会感谢社区的帮助。

【问题讨论】：

标签： javascript html css bootstrap-5

【解决方案1】：

显示“offcanvas-backdrop”时应用滤镜模糊。将不透明度设置为 1 以覆盖默认不透明度 0.5。您可以将“背景颜色”更改为您喜欢的任何颜色。

.offcanvas-backdrop.show {
  opacity: 1;
  background-color: rgba(15,23,42,.5);
  backdrop-filter: blur(8px);
}

【讨论】：