Le flou d'une image via CSS?

Question

Sur de nombreux smartphones (Samsung Galaxy II étant un exemple) lorsque vous parcourez une galerie de photos, sa brouille de copie est établie dans l'arrière-plan. Cela peut être réalisé en CSS dynamiquement (c'est à dire. sans la copie de la photo d'être préparé à l'avance enregistré)? Est-il une sorte de complexe CSS image filtre de flou de l'image?

Answer 1

Vous pouvez utiliser des filtres CSS3. Ils sont relativement faciles à mettre en œuvre, mais sont uniquement pris en charge sur webkit à la minute. Samsung Galaxy 2 du navigateur devrait soutenir si, comme je pense que c'est un navigateur webkit?

Answer 2

Avec CSS3, nous pouvons ajuster facilement une image. Mais rappelez-vous ceci ne change pas l'image. Il n'affiche que l'image modifiée.

Voir la démo en direct et le code source complet ici

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

Voir le code suivant pour plus de détails.

Pour faire un gris de l'image:

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

Pour donner un sépia look:

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%);
}

Le Flou d'une image:

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

Answer 3

Il y a du navigateur croix de la solution aussi http://demosthenes.info/blog/534/Crossbrowser-Image-Blur

Answer 4

CSS3 filtres fonctionnent actuellement uniquement dans les navigateurs webkit (safari et chrome). Cela fournit un navigateur croix de solution.