Filtro de brillo en firefox y opera sin archivo svg

Para mi proyecto actual usé filter -webkit-filter: brightness(-20%);-moz-filter: brightness(-20%); Pero por alguna razón, este filtro no funciona en Firefox y Opera (también tengo el prefijo Opera). Encontré la forma en que se puede usar esto, pero necesito convertir el filtro de brillo en código svg. ¿Alguna idea de cómo puedo hacer esto?
Lo que tengo que hacer es una galería pequeña, con imágenes oscurecidas y con imágenes normales al pasar el mouse sin usar imágenes 2x.

preguntado el 04 de julio de 12 a las 09:07

2 Respuestas

Desea utilizar un filtro SVG. Un ejemplo de un filtro que oscurecerá su imagen en una cantidad fija en cada canal es:

<filter id="darken">
<feComponentTransfer>
       <feFuncR type="linear" intercept="-0.2" slope="1"/>
       <feFuncG type="linear" intercept="-0.2" slope="1"/>
       <feFuncB type="linear" intercept="-0.2" slope="1"/>
   </feComponentTransfer>
</filter>

Esto oscurecerá su imagen en un 20% en cada canal de color. jsfiddle completo

Respondido 10 Oct 12, 04:10

En la página de MDN sobre filtros css, hay algunos ejemplos alternativos de svg. desarrollador.mozilla.org/en-US/docs/CSS/filter - Marco Luglio

Gracias me salvas el día :) - Charles

Si necesita una solución más multinavegador, puede hacer que las imágenes sean translúcidas cuando no se desplazan:

img {
    opacity: .7;
}
img:hover {
    opacity: 1;
}

Esto tendrá el efecto de oscurecerlos cuando estén sobre un fondo oscuro.

Respondido 10 Oct 12, 03:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.