¿Como puedo aplicar un filtro de grayscala a una imagen con CSS?
2 respuestas
Respuesta original de StackOverflow en inglés
Webkit cuenta con soporte para filtros CSS Compatiblidad cross-browser!
img {
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
/* Disable grayscale on hover */
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
<img src="http://lorempixel.com/630/170/">
Sintaxis
.imagen {
filter: <filter-function> [<filter-function>]* | none
}
Un ejemplo aplicando un filtro a una imagen sería:
HTML
<img class="blur" src="imagen.jpg" />
CSS
.blur {
-webkit-filter: grayscale(20%)
filter: grayscale(20%);
}