android 模糊叠加,html - 如何将菜单叠加层的背景变成覆盖层的模糊（或“毛玻璃”）？ - 堆栈内存溢出...

按照Traversy Media的本教程( https://youtu.be/gYzHS-n2gqU )设置我的网站投资组合网站。 我想将菜单(它是透明的)变成一个仅对其下面的内容应用模糊处理的菜单。

我尝试输入过滤器：blur(5px); 以及在css中的各种组合，但它永远不会起作用:(

// Menu Overlay

.menu {

position: fixed;

top: 0;

width: 100%;

opacity: 1; //this is where you control the opacity of the menu. 1 = opaque, 0 = transparent

visibility: hidden;

&.show {

visibility: visible;

}

&-branding,

&-nav {

display: flex;

flex-flow: column wrap;

align-items: center;

justify-content: center;

float: left;

width: 50%;

height: 100vh;

overflow: hidden;

}

&-nav {

margin: 0;

padding: 0;

/*background: darken($primary-color, 5);*/

background: transparentize(

$color: darken($primary-color, 5),

$amount: 0.05

);

list-style: none;

transform: translate3d(0, -100%, 0);

@include easeOut;

&.show {

// Slide in from top

transform: translate3d(0, 0, 0);

}

}

您可以在mashal.co/上创建的投资组合站点上看到正在使用的菜单代码。该菜单仍在建设中，所以不要为之烦恼我。

现在，当我单击右上角的菜单按钮时，它只是一个较小的透明覆盖层。 我上面提供的代码仅适用于覆盖图的右半部分。 非常感谢您提前提供的所有帮助！！