html - css navigation bar is blurred, the navigation bar is fixed, and the page below is blurred as the page slides. How to achieve this?

Question

After searching for a long time on the Internet, I couldn't find a solution that can dynamically affect the page below and make it blurry.
This is a blur effect from station b. It is static. The principle is to use two identical pictures, one is partially blurred and the other is combined.

My idea is to add a Gaussian blur to the adjustment layer similar to AE, which will have a real-time impact on the layer below (page sliding)
It seems that the css filter cannot act on the layer below, but can only act on a certain element. itself.

I’m new to front-end, please give me some advice!

Answer 1

In fact, in most cases, the fake blur of station b is enough.
The effect you want can be achieved, but it is quite troublesome and the compatibility is still poor. It is better not to bother with such meaningless things when you are new to the front-end. Of course, the code is also there. Here I will give you a demo of CSS3 to achieve the frosted glass effect. You can see for yourself whether you can draw parallels

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 2

Use CSS3 - filter attribute, the value of the blur effect is blur (blur value px), and the position attribute is used to fix the navigation, and the fixed positioning value is fixed.