模糊背景为Bootstrap 5 off画布导航栏菜单

Question

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

模糊边栏背景

根据MDN文档，background -filter用于模糊元素的背景。

.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');
}

但这也没有用。

我很感激来自社区的帮助。

Answer 1

在offcanvas-backdrop"显示。将不透明度设置为1以覆盖默认的不透明度0.5。您可以更改&;background-color&;你喜欢什么颜色都行。

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