html - bar navigasi css kabur, bar navigasi dibetulkan, dan halaman di bawah kabur semasa halaman meluncur Bagaimana untuk mencapai ini?

Question

Selepas mencari lama di Internet, saya tidak menemui penyelesaian yang boleh menjejaskan halaman di bawah secara dinamik dan menjadikannya kabur.
Ini adalah kesan kabur dari stesen b Ia adalah statik Prinsipnya adalah menggunakan dua gambar yang sama, satu kabur separa dan satu lagi digabungkan.

Idea saya adalah untuk menambah kabur Gaussian pada lapisan pelarasan yang serupa dengan AE, yang akan memberi kesan masa nyata pada lapisan di bawah (halaman gelongsor)
Nampaknya penapis css tidak boleh bertindak pada lapisan di bawah, tetapi hanya boleh bertindak atas unsur itu sendiri.

Saya baru dalam bidang hadapan, sila beri saya nasihat!

Answer 1

Malah, dalam kebanyakan kes, kabur palsu station b sudah cukup untuk digunakan
Kesan yang anda mahukan boleh dicapai, tetapi ia agak menyusahkan dan keserasian masih lemah perkara apabila anda baru untuk bahagian hadapan Sudah tentu, kod itu juga ada di sini saya akan memberikan anda demo CSS3 untuk mencapai kesan kaca beku Anda boleh melihat sendiri sama ada anda boleh melukis selari

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

Gunakan CSS3 - atribut penapis, nilai kesan kabur adalah kabur (nilai kabur px), dan atribut kedudukan digunakan untuk membetulkan navigasi, dan nilai kedudukan tetap ditetapkan.