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.
大家讲道理
大家讲道理 2017-05-24 11:36:02
0
2
1011

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 !

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

répondre à tous (2)
PHPzhong

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; }
    给我你的怀抱

    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.

      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!