砂玻璃效果只有css

Question

试图模糊菜单栏的背景div，因此它会在用户滚动时模糊页面内容，但它会使自己模糊，而不是z-index 0上的背景内容。我在哪里犯错误？ （不透明度不是问题，我已经测试过了）感谢您的帮助。

我用这个堆栈的答案来帮助CSS Blur effect does not work

这是我的CSS

.menuwrapper {
background-color: rgba(250,250,250, 0.1);
position: fixed;
width: 100%;
height: 42px;
z-index: 1;
margin: 0px;
overflow: hidden;
}

.menuwrapper::before{
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(10px);
    -moz-filter:blur(10px);
    -o-filter:blur(10px);
    -webkit-filter:blur(10px);
    background: rgba(0,0,0,0.5);
  z-index: 1;
}

这是我的HTML：

div class="menuwrapper"  data-aos="slide-down" data-aos-delay="1800" data-aos-duration="500">
        <div class="menu">
            <div class="leftmenu"><a href="#intro"><img src="main_media/logo_kvarteto_black.png" alt="logo Sláčikové kvarteto Art" height="48" width="48" style="position:absolute;top:-3px"></a></div>
            <div class="rightmenu">
                <ul>
                    <li><a class="anchor" href="#kontakt">KONTAKT</a></li>
                    <li><a class="anchor" href="#galeria">FOTO & VIDEO</a></li>
                    <li><a class="anchor" href="#clenovia">ČLENOVIA</a></li>
                    <li><a href="#repertoar">REPERTOÁR</a></li>
                    <li><a href="#kdehrame">KDE HRÁME</a></li>
                    <li><a href="#intro">DOMOV</a></li>
                </ul>
            </div>
        </div>
    </div>

代码结果如上：

Answer 1

你必须制作一个覆盖你想要模糊的区域的div。

<div id="glassLayer" style="width:100%">&nbsp;</div>