Comment appliquer un filtre CSS3 de floutage à une image de fond background-image ?
En CSS3, il est possible de flouter une image en utilisant le filtre blur. Voici comment faire.
Les filtres fournis par le langage CSS3 permettent d'appliquer différents effets sur des images. Il est par exemple possible de flouter une image en utilisant le filtre blur. On peut appliquer à ce filtre un rayon en pixels, qui correspond au nombre de pixels qui seront mélangés entre eux. Plus le chiffre est élevé, plus l'effet de flou est important. On peut également appliquer un fichier qui contient un filtre SVG, si l'on souhaite utiliser un filtre particulier pour flouter l'image.
/* Filtre en pixels */ filter : blur(5px) /* Filtre avec un fichier */ filter : url(flou.svg)
Si l'on veut flouter l'image d'arrière-plan du site, il faut tout d'abord séparer le site en 2 containers, un qui contient l'image d'arrière-plan et un pour le contenu du site. En effet, les filtres CSS3 s'appliquent à un élément, et il faut donc que l'image soit liée à un élément seul, sinon le site serait entièrement flouté.
<!-- Container pour l'image de fond --> <div class=imageDeFond></div> <!-- Container pour le contenu du site --> <div class=contenu> <p>Bienvenue sur ce site !!!</p> </div>
Il suffit ensuite d'appliquer le CSS suivant pour que le fond soit flouté et que le contenu du site soit visible clairement devant le fond :
.imageDeFond {
/* La position est fixée en haut à gauche, en arrière-plan de la page */
position: fixed;
left: 0;
right: 0;
z-index: 1;
/* On indique l'image de fond et les dimensions qu'elle occupe */
display: block;
background-image:
url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90
bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width: 1200px;
height: 800px;
/* On applique le filtre CSS3 pour flouter l'image (avec ici les variantes pour les différents moteurs de rendu) */
/* Safari */
-webkit-filter: blur(5px);
/* Firefox */
-moz-filter: blur(5px);
/* Opera */
-o-filter: blur(5px);
/* Internet Explorer */
-ms-filter: blur(5px);
/* Filtre de floutage CSS3 standard */
filter: blur(5px);
}
.contenu {
/* Le contenu est fixé en haut de la page */
position: fixed;
left: 0;
right: 0;
/* Il est mis au premier plan */
z-index: 9999;
}