Une image transparente pour les flouter toutes...

[Ossonomo]

Bonjour/bonsoir à toutes et à tous. ^^

Alors voici le contexte : un site web avec comme fond un assemblage d'images formant un paysage coloré etc etc... dans la navigation du site lors de l'affichage d'une fenêtre j'aimerais appliquer un flou sur le fond du site, n'ayant pas trouver de solution en termes de script (le principal problème étant que le fond est composés de plusieurs images redimensionnés suivant la taille de l'écran du visiteur) j'ai pensé à utilisé une image transparente qui flouterais mon fond à la volé...

La question : Est - il possible de créer une image la plus transparente possible et pouvant flouter une image en dessous ? (Un peu comme si vous regarder à travers un écran plastique légèrement opaque)

Merci pour vos réponses, je suis en panne d'idées HELP

[Galdon]

Tu peux essayer en utilisant la propriété CSS filter :

Code: Tout sélectionner

#overlay {
    -webkit-filter: blur(30px);
    -moz-filter: blur(30px);
    -o-filter: blur(30px);
    -ms-filter: blur(30px);
    filter: blur(30px);
    opacity: 0.4;
}

Sinon en cherchant sur internet j'ai trouvé pas mal de choses :
http://jsfiddle.net/peterbenoit/EppdS/
http://codepen.io/GianlucaGuarini/pen/Hzrhf
http://jordanhollinger.com/2014/01/29/c ... ucent-box/
http://www.blurjs.com/
https://css-tricks.com/frosting-glass-css-filters/
http://blattchat.com/2013/05/17/creatin ... ur-effect/ (celui là ne marche que sur chrome, enfin webkit, mais pas firefox)

[Ossonomo]

Bonjour et désolé du contre temps, merci pour votre réponse, les solutions que vous nous avez proposer sont à l'étude et je vous tiendrais au courant de l'évolution.


Cordialement