web-dev-qa-db-fra.com

Brouiller une image via CSS?

Sur de nombreux smartphones (Samsung Galaxy II, par exemple), lorsque vous parcourez une galerie de photos, sa copie floue apparaît en arrière-plan. Cela peut-il être réalisé de manière dynamique par CSS (c.-à-d. Sans que la copie de la photo en cours de préparation soit enregistrée au préalable)? Existe-t-il un type de filtre d'image CSS complexe pour brouiller une image? 

cssimageeffects
52
user776686

Vous pouvez utiliser Filtres CSS3 . Ils sont relativement faciles à mettre en œuvre, même s’ils ne sont pris en charge que sur Webkit à la minute. Le navigateur de Samsung Galaxy 2 devrait cependant prendre en charge, car je pense que c'est un navigateur webkit?

43
Andy

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 rendre 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 régler 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. C'est inclure toutes les déclarations css

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

Pour utiliser plusieurs 

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

Démo Codepen

25
Raj Sharma

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);
10
sameeuor

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

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

Les filtres CSS3 ne fonctionnent actuellement que dans les navigateurs Webkit (safari et chrome). 

0
Aneeshmg
img {
  filter: blur(var(--blur));
}
0
Bar Horing