¿Existe alguna forma de navegador cruzado para usar CSS para cambiar el tono de una imagen? Por ejemplo, si tengo un icono de escala de grises (un elemento img), me gustaría que cambie los colores a sepia al pasar el mouse.¿Cómo colorear una imagen en CSS?
Debería funcionar en buscadores que no sean IE, por lo que no puedo usar el filtro. ¿Hay algún truco de CSS 3 que permita eso?
si quiere modificar una imagen en css, no es posible hacer eso. pero puedes jugar con la propiedad de opacidad. Sí, eso solo establece la opacidad de la imagen, pero será un efecto agradable. he aquí un ejemplo:
img{-webkit-transition:opacity .3s ease-in-out;}
img:hover{opacity:.6}
ese fragmento dará un agradable efecto de transición de entrada y salida de imagen en transparente.
en otro caso, puede usar la imagen del sprite para hacer lo que quiera :)
Esto es lo más parecido a lo que tenía en mente. ¡Gracias! –
eres bienvenido :) –
No tengo una sintaxis estandarizada para varios navegadores que yo sepa. Sin embargo, puede usar HTML5 Canvas y hacer esto usted mismo. Usar SVG también puede funcionar, pero no estoy seguro de qué tan bien todos los navegadores, en particular Internet Explorer, admiten SVG.
ejemplo SVG utilizando una matriz de transformación de color: http://www.dhmedia.com.au/sites/default/files/examples/SVG-filters/sepia.xhtml
No hay precisa manera de hacer esto en el CSS, como se ha mencionado ya se puede utilizar otras tecnologías para hacerlo - a saber Javascript.
En el sentido muy básico, usted podría intentar imitar un estilo de la sepia mediante la superposición de un div en la parte superior de una imagen con un color sepia como color y una opacidad rgba(94, 38, 18, 0.2) - pero este método es bastante crudo. Incluso podría superponerse usando una imagen transparente, que podría ser mejor que esta opción (pero aún bastante basura).
Nada que yo sepa. Buena pregunta sin embargo. +1 –
Lo más probable es que no sea posible con CSS ... pero puedes hacerlo con un poco de Javascript y '
no creo que se pueda hacer solo CSS. es posible que desee probar una biblioteca js como paintbrushjs http://mezzoblue.github.com/PaintbrushJS/demo/index.html o pixastic http://www.pixastic.com/lib/ – ptriek