Question

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

我使用此堆栈答案寻求帮助IO.copy_stream

这是我的css

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>

这是我的HTML：

上面代码的结果：CSS Blur effect does not work

Answer 1

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

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

砂玻璃效果只有css

1 个答案: