html - la barre de navigation CSS est floue, la barre de navigation est fixe et la page ci-dessous est floue au fur et à mesure que la page glisse.

Question

Après de longues recherches sur Internet, je n'ai pas trouvé de solution capable d'affecter dynamiquement la page ci-dessous et de la rendre floue.
Il s'agit d'un effet de flou de la station b. Il est statique. Le principe est d'utiliser deux images identiques, l'une est partiellement floue et l'autre est combinée.

Mon idée est d'ajouter un flou gaussien au calque de réglage similaire à AE, ce qui aura un impact en temps réel sur le calque du dessous (page slide)
Il semble que le filtre css ne puisse pas agir sur le calque du dessous, mais ne peut que agir sur un élément lui-même.

Je suis nouveau dans le front-end, merci de me donner quelques conseils !

Answer 1

En fait, dans la plupart des cas, le faux flou de la station b suffit.
L'effet souhaité peut être obtenu, mais c'est assez gênant et la compatibilité est toujours mauvaise. Il vaut mieux ne pas s'embêter avec des choses aussi insignifiantes lorsque vous le faites. sont nouveaux sur le front-end. Bien sûr, le code est également là. Ici, je vais vous donner une démo de CSS3 pour obtenir l'effet verre dépoli. Vous pouvez voir par vous-même si vous pouvez faire des parallèles.

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

Utilisez CSS3 - attribut de filtre, la valeur de l'effet de flou est flou (valeur de flou px), et l'attribut de position est utilisé pour corriger la navigation, et la valeur de positionnement fixe est fixe.