Dev Faq
7
votes

Comment puis-je brouiller le contenu dynamique derrière un div?

Je travaille sur un projet avec une page de Google Maps de style complet. Y a-t-il une manière (CSS, JQuery ou d'autres options ...) pour superposer une en-tête et une barre latérale à glissière avec un effet flou similaire à l'effet givré / flou iOS?

im essayant d'atteindre quelque chose comme ça. échantillon d'en-tête floue

Mon problème est, car je ne contrôle pas ce qui est sous l'en-tête et que cela change constamment, je ne peux pas utiliser le truc 2 images pour simuler un fond flou. Toute suggestion?

4 commentaires

Pendant que vous pouvez brouiller l'élément actuel, je ne crois pas qu'il y ait un moyen de brouiller le contenu derrière l'élément ...

Filtre de fond , mais presque aucun support de navigateur pour le moment.

Vous pouvez copier le contenu dynamique dans un nouvel élément, avec un masque de détourage , puis flou le contenu.

À partir de 2019, Chrome, Edge, Safari et Opera soutiennent déjà Tackdrop-Filtre .

4 Réponses :

0
votes

CSS BLUR fonctionne? 

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

1 commentaires

Nope, il s'agit de floue de choses en retard.

2
votes

Si vous chargez dans une image externe, pouvez-vous le charger dans un conteneur code> SVG code> en arrière-plan et appliquer un fichier fegaussianblur code> filtre? Je ne sais pas combien de contrôle sur le marquage que vous avez.

Un apprêt d'écoles W3 sur le flou: p>

http://www.w3schools.com/svg/svg_fegaussianblur.asp p>

a jsfiddle (pas le mien): p>

https://jsfiddle.net/jamygolden/yug5u/2/ p>

échantillon balisage: P> 

#svg-image-blur { height: 200px; width: 300px; }
#svg-image:hover { filter:url(#blur-effect-1); }

0 commentaires
3
votes

Lire ce message https://stackoverflow.com/a/19688466/1663572 et lien associé http://abduzeedo.com/IAS7-FROSTED-GLASS-EFPET-HTML- 5-et-javascript

La solution utilise cette étape.

  1. Rendez le HTML
  2. Dupliquer la zone de contenu et le convertir en toile.
  3. Déplacez la toile vers la partie d'en-tête
  4. synchronisez le rouleau du contenu avec la toile dans l'en-tête

    bas de la page est un exemple (le étroit). Il y a une image manquante ou autre chose et il est un peu répandu mais essayez de faire défiler. Mais je ne suis pas sûr de la fréquence des changements du contenu que vous avez mentionné. Cela pourrait causer de graves problèmes de performance. Mais essayez-le.

    Je ne pense pas à aucune autre option pour atteindre très commémoré de penser que vous voulez.

0 commentaires
2
votes

Utilisez le filtre de toile de fond, il est maintenant pris en charge par de nombreux navigateurs: 

backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);

1 commentaires

sous-estimé et parfait!

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO