Flouter une image via CSS?

Sur de nombreux smartphones (Samsung Galaxy II étant un exemple), lorsque vous parcourez une galerie de photos, sa copie floue est présentée en arrière-plan. Est-ce que cela peut être réalisé par CSS de manière dynamic (c.-à-d. Sans que la copie de la photo en cours de préparation soit sauvegardée)? Existe-t-il un filtre d’image CSS complexe pour brouiller une image?

Vous pouvez utiliser des filtres CSS3 . Ils sont relativement faciles à mettre en œuvre, mais ne sont supportés que sur webkit à la minute. Le navigateur de Samsung Galaxy 2 devrait être compatible, car je pense que c’est un navigateur Webkit?

Avec CSS3, nous pouvons facilement ajuster une image. Mais rappelez-vous que cela ne change pas l’image. Il affiche uniquement l’image ajustée.

Voir le code suivant pour plus de détails.

Pour faire une image grise:

img { -webkit-filter: grayscale(100%); } 

Pour donner un look sépia:

 img { -webkit-filter: sepia(100%); } 

Pour régler la luminosité:

 img { -webkit-filter: brightness(50%); } 

Pour ajuster le contraste:

 img { -webkit-filter: contrast(200%); } 

Pour brouiller une image:

 img { -webkit-filter: blur(10px); } 

Vous devriez également le faire pour différents navigateurs. Cela inclut toutes les instructions css

  filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); 

Utiliser plusieurs

  filter: blur(5px) grayscale(1); 

Ce code fonctionne pour un effet de flou pour tous les navigateurs.

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

Oui, l’utilisation du code suivant vous permettra d’appliquer un effet de flou à l’image spécifiée et vous permettra également de choisir le degré de flou.

 img { -webkit-filter: blur(10px); filter: blur(10px); } 

Les filtres CSS3 ne fonctionnent actuellement que dans les navigateurs Webkit (Safari et Chrome).

 img { filter: blur(var(--blur)); }