html - CSS-Navigationsleiste ist unscharf, die Navigationsleiste ist fixiert und die Seite unten ist unscharf, wenn die Seite verschoben wird.

Question

Nach langer Suche im Internet konnte ich keine Lösung finden, die sich dynamisch auf die Seite unten auswirken und sie unscharf machen kann.
Dies ist ein Unschärfeeffekt von Station B. Er ist statisch. Das Prinzip besteht darin, zwei identische Bilder zu verwenden, eines ist teilweise unscharf und das andere ist kombiniert.

Meine Idee ist es, der Einstellungsebene eine Gaußsche Unschärfe hinzuzufügen, ähnlich wie bei AE, die sich in Echtzeit auf die darunter liegende Ebene auswirkt (Seitenverschiebung).
Es scheint, dass der CSS-Filter nicht auf die darunter liegende Ebene einwirken kann, sondern nur auf ein Element selbst einwirken.

Ich bin neu im Frontend, bitte geben Sie mir einen Rat!

PHPz · Answer

其实大部分情况b站的那种假模糊就足够使用了
你要的效果也能实现，挺麻烦的，兼容性还差，初入前端还是不要去折腾这种没啥太大意义的东西了，当然代码也是有的，我这里给个css3实现毛玻璃效果的demo，你自己可以看着能否触类旁通

body, main::before {
    background: url("tiger.jpg") 0 / cover fiexed;
}
main {
    positon: relative;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    margin: -30px;
}

给我你的怀抱 · Answer

使用CSS3 - filter滤镜属性，模糊效果的值为blur(模糊值px)，而导航固定就用position属性，固定定位值为fixed。