web-dev-qa-db-fra.com

utiliser un div pour brouiller une image derrière?

Est-il possible de coder un div pour lui permettre de brouiller l'image qui se trouve en dessous?

quelque chose comme ça:

enter image description here

Cela pourrait-il être fait d'une manière ou d'une autre avec -webkit peut être?

16
Dr Robotnik

Pas avec CSS seul, mais vous pouvez obtenir un effet similaire avec Canvas et la bibliothèque StackBlurforCanvas. Voir ceci

MISE À JOUR: Ressemble à backdrop-filter était récemment introduit Webkit tous les soirs, donc nous pourrons éventuellement le faire avec CSS uniquement. Yay!

28
Dre

Malheureusement, cela ne peut pas être fait uniquement à l'aide de CSS. Bien que le filtre webkit prenne en charge le flou, il ne prend pas en charge le flou autre que l'élément auquel il s'applique.

Il existe un moyen plus hacky de le faire, décrit ici - http://css-tricks.com/blurry-background-effect/

4
Tim Ebenezer