¿Cambiar el color de la imagen PNG a través de CSS?
465
Dado un PNG transparente que muestra una forma simple en blanco, ¿es posible cambiar de alguna manera el color de esto a través de CSS? ¿Algún tipo de superposición o qué no?
Puede establecer la background-colorpropiedad CSS. Puede crear una parte no transparente que se reparará y una parte transparente de la imagen que se rellenará con cualquier color que desee a través de CSS. ¿Es eso lo que quieres lograr?
jakub.g
2
@qbk, esto vale una respuesta, no solo un comentario. Y me ganaste por 1 segundo, técnicamente.
Kirill G
2
Puede usar elementos psuedo con un modo de fusión para cambiar el color de cualquier ícono que sea 100% negro o 100% blanco (el fondo permanece transparente). Vea mi respuesta aquí: stackoverflow.com/a/39796437/1472114
chrscblls
Respuestas:
570
Puede usar filtros con -webkit-filtery filter: los filtros son relativamente nuevos para los navegadores, pero se admiten en más del 90% de los navegadores de acuerdo con la siguiente tabla CanIUse: https://caniuse.com/#feat=css-filters
Puedes cambiar una imagen a escala de grises, sepia y mucho más (mira el ejemplo).
Entonces ahora puede cambiar el color de un archivo PNG con filtros.
@datatype_void A veces, usted no controla la imagen inicial. Entonces, parece que está de acuerdo en que mi punto es válido, no puede obtener ningún color a partir del negro o el blanco. Ah, y jugué durante más de 5 minutos para llegar a esta conclusión.
AsGoodAsItGets
55
también especifique que puede hacer cosas como esta: lo .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }que significa que PUEDE pasar de negro y transparente o escala de grises a color y funciona incluso en gifs animados
tatsu
141
Encontré este gran ejemplo de codepen en el que inserta su valor de color hexadecimal y devuelve el filtro necesario para aplicar este color a png
EDITAR: Estoy usando Font-Awesome en mi último proyecto. Incluso puedes arrancarlo. Simplemente ponga esto en su <head>:
<linkhref="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"rel="stylesheet"><!-- And if you want to support IE7, add this aswell --><linkhref="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css"rel="stylesheet">
Y luego continúe y agregue algunos enlaces de iconos como este:
Font-Awesome usa diferentes nombres de clase en la nueva versión, probablemente porque esto hace que los archivos CSS sean drásticamente más pequeños y para evitar clases ambiguas de CSS. Entonces ahora deberías usar:
+1 para pensar fuera de la caja. Y hoy en día hay aplicaciones en línea fáciles de usar para ayudarlo a crear una fuente web desde una imagen (svg).
yvan vander sanden
Si <a class="icon-thumbs-up"> </a> es el nombre de la clase anterior y <a class="fa fa-thumbs-up"> </a> es el nuevo, no lo creo hace que el CSS sea más pequeño, puedo ver un espacio en blanco adicional entre fa y fa-pulgares arriba, agregar al menos 1 byte adicional a ese archivo CSS si no me equivoco?
Brandito
Font Awesome fue genial en su día, desafortunadamente su bloqueo de renderizado, lo que hace que Google y sus usuarios estén descontentos. Primero abordamos esto eliminando las fuentes no utilizadas tanto del CSS como de los archivos de fuentes binarias, reduciendo los datos a la mitad. Ahora estamos en el proceso de eliminar por completo y reemplazar con un sprite simple, que no es el bloqueo de renderizado (DOM y CSSOM se procesan más rápido, haciendo que los elementos en la página aparezcan más rápido), y reducirá los datos en otro 75%, hasta 6KB. FA es de alrededor de 100 KB. Las máscaras CSS pueden ayudar en nuestro caso, pero probablemente sean innecesarias.
YK
25
He podido hacer esto usando el filtro SVG. Puede escribir un filtro que multiplique el color de la imagen de origen con el color al que desea cambiar. En el fragmento de código a continuación, el color de inundación es el color al que queremos cambiar el color de la imagen (que es Rojo en este caso). FeComposite le dice al filtro cómo estamos procesando el color. La fórmula para feComposite con aritmética es (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) donde i1 e i2 son colores de entrada para in / in2 en consecuencia. Entonces, especificar solo k1 = 1 significa que solo hará i1 * i2, lo que significa multiplicar ambos colores de entrada juntos.
Nota: Esto solo funciona con HTML5 ya que está usando SVG en línea. Pero creo que puede hacer que esto funcione con un navegador anterior al poner SVG en un archivo separado. No he probado ese enfoque todavía.
Hombre, te están robando esta respuesta. Cualquiera que busque colorear imágenes más allá de lo que el filtro puede hacer: rotar el tono, esta es la forma de hacerlo.
MaxPRafferty
23
La etiqueta img tiene una propiedad de fondo como cualquier otra. Si tiene un PNG blanco con una forma transparente, como una plantilla, puede hacer esto:
Quiero que la parte blanca tenga un color diferente, no la parte transparente.
Wesley
2
La mejor solución que encontré hasta ahora. Lástima que solo funcione si usa un color de fondo sólido en sus sitios web
Jules Colle
8
@Wesley necesita invertir la imagen (para que el bit blanco se vuelva transparente y el resto blanco), lo que puede hacer con su editor de imágenes y máscaras favoritas.
Charles Goodwin el
55
@CharlesGoodwin Eso solo funciona, entonces la imagen se coloca en un fondo blanco.
WebKit ahora admite máscaras alfa en CSS. Las máscaras le permiten superponer el contenido de un cuadro con un patrón que puede usarse para eliminar partes de ese cuadro en la pantalla final. En otras palabras, puede recortar a formas complejas basadas en el alfa de una imagen.
[...]
Hemos introducido nuevas propiedades para proporcionar a los diseñadores web un gran control sobre estas máscaras y cómo se aplican. Las nuevas propiedades son análogas a las propiedades de imagen de fondo y borde que ya existen.
¿Es eso parte de algún estándar (aún por venir), ya que no encontré ninguna información no relacionada con Webkit, o es solo el sabor de Apple? Parece que el W3 está sugiriendo SVG para tales casos de uso: w3.org/TR/SVG/masking.html
feeela
3
Lamentablemente, esto parece ser solo un kit web y el blog engaña mediante el uso de imágenes compuestas en lugar de ejemplos reales. Esta respuesta es un poco de arenque rojo.
La pregunta era sobre colorear una imagen blanca con un fondo transparente. hue-rotateNo funciona en blanco.
Synetech
17
Creo que tengo una solución para esto que es a) exactamente lo que estaba buscando hace 5 años, yb) es un poco más simple que las otras opciones de código aquí.
Con cualquier png blanco (p. Ej., Icono blanco sobre fondo transparente), puede agregar un selector :: after para cambiar el color.
.icon {
background: url(img/icon.png);/* Your icon */
position: relative;/* Allows an absolute positioned psuedo element */}.icon::after{
position: absolute;/* Positions psuedo element relative to .icon */
width:100%;/* Same dimensions as .icon */
height:100%;
content:"";/* Allows psuedo element to show */
background:#EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply;/* Only apply color on top of white, use screen if icon is black */}
Reubiqué la imagen de imgur, tuve algunos problemas para cargarla.
chrscblls
En la última versión de Chrome, parece que el fondo (transparente) también se está ajustando al color. En el ejemplo vinculado, cuando paso el mouse, solo veo un cuadrado rosa opaco ... Funciona bien en Firefox.
logidelic
1
@chrscblls El enlace está muerto.
Steven Lu
15
La línea más simple que funcionó para mí:
filter: opacity(0.5) drop-shadow(000 blue);
Puede ajustar la opacidad de 0 a 1 para que el color sea más claro o más oscuro.
Agradable. Esto evita todas las limitaciones de las otras soluciones aquí.
cdonner
3
repita la sombra
paralela
1
SOLUCIÓN GENIUS, se ve un poco desordenada en el CSS, pero con un comentario, es perfectamente comprensible. ¡Gracias!
Richard KeMiKaL GeNeRaL Denton
No funciona para obtener el color exacto, siempre es una especie de mezcla entre el color original y el nuevo.
suizo
Este enfoque distorsiona ligeramente la imagen y empeora cada vez que se aplica sombra paralela. Al igual que hacer una copia de una copia, los resultados son diferentes del original.
SMAG
8
Encontré esto mientras buscaba en Google, encontré el mejor trabajo para mí ...
Esto funciona, he votado. Pero solo para el registro tiene algunos problemas, como no puede cambiar el tamaño de la imagen de fondo, no puede colocar la imagen y se repite.
Requerí un color específico, por lo que el filtro no funcionó para mí.
En cambio, creé un div, explotando múltiples imágenes de fondo CSS y la función de gradiente lineal (que crea una imagen en sí misma). Si utiliza el modo de mezcla de superposición, su imagen real se combinará con la imagen de "degradado" generada que contiene el color deseado (aquí, # BADA55)
@VicSeedoubleyew el fragmento funciona bien. Inspeccione su div utilizando herramientas de desarrollo para asegurarse de que su CSS realmente se esté aplicando. Además, asegúrese de que la URL de su imagen sea válida si no está utilizando la que le proporcioné. EDITAR: si el fragmento no funciona para usted, es posible que esté utilizando un navegador que está desactualizado o que no admite la función de gradiente lineal.
rolznz
5
Respondiendo porque estaba buscando una solución para esto.
la pluma en la respuesta @chrscblls funciona bien si tiene un fondo blanco o negro, pero el mío no. Además, las imágenes se generaron con ng-repeat, por lo que no pude tener su url en mi css Y no puedes usar :: after en las etiquetas img.
Entonces, pensé en solucionarlo y pensé que podría ayudar a las personas si también tropezaban aquí.
Entonces, lo que hice es más o menos lo mismo con tres diferencias principales:
la url está en mi etiqueta img, la puse (y una etiqueta) en otro div en el que :: after funcionará.
el 'modo de mezcla-mezcla' se establece en 'diferencia' en lugar de 'multiplicar' o 'pantalla'.
Agregué un :: before con exactamente el mismo valor para que el :: after hiciera la 'diferencia' de la 'diferencia' hecha por el :: before y lo cancelé.
Para cambiarlo de negro a blanco o de blanco a negro, el color de fondo debe ser blanco. Desde el negro hasta los colores, puede elegir el color que prefiera. Desde el blanco hasta los colores, deberá elegir el color opuesto al que desee.
No es necesario un conjunto completo de fuentes si solo necesita un icono, además creo que es más "limpio" como un elemento individual. Entonces, para este propósito, en HTML5 puede colocar un SVG directamente dentro del flujo de documentos. Luego puede definir una clase en su hoja de estilo .CSS y acceder a su color de fondo con elfill propiedad:
Tenga en cuenta que, en el ejemplo, he usado :hoverpara ilustrar el comportamiento; si solo desea cambiar el color para el estado "normal", debe eliminar la pseudoclase.
Para cambiar literalmente el color, puede incorporar una transición CSS con un filtro -webkit donde, cuando ocurra algo, invocaría el filtro -webkit de su elección. Por ejemplo:
Al cambiar una imagen de negro a blanco, o de blanco a negro, el filtro de rotación de tono no funciona, porque el blanco y negro no son técnicamente colores. En cambio, los cambios de color en blanco y negro (de negro a blanco o viceversa) deben hacerse con la propiedad de filtro invertido.
background-colorpropiedad CSS. Puede crear una parte no transparente que se reparará y una parte transparente de la imagen que se rellenará con cualquier color que desee a través de CSS. ¿Es eso lo que quieres lograr?Respuestas:
Puede usar filtros con
-webkit-filteryfilter: los filtros son relativamente nuevos para los navegadores, pero se admiten en más del 90% de los navegadores de acuerdo con la siguiente tabla CanIUse: https://caniuse.com/#feat=css-filtersPuedes cambiar una imagen a escala de grises, sepia y mucho más (mira el ejemplo).
Entonces ahora puede cambiar el color de un archivo PNG con filtros.
Fuente
fuente
.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }que significa que PUEDE pasar de negro y transparente o escala de grises a color y funciona incluso en gifs animadosEncontré este gran ejemplo de codepen en el que inserta su valor de color hexadecimal y devuelve el filtro necesario para aplicar este color a png
Generador de filtros CSS para convertir de negro a color hexadecimal objetivo
por ejemplo, necesitaba que mi png tuviera el siguiente color # 1a9790
entonces tienes que aplicar el siguiente filtro a tu png
fuente
filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);Es posible que desee echar un vistazo a las fuentes Icon. http://css-tricks.com/examples/IconFont/
EDITAR: Estoy usando Font-Awesome en mi último proyecto. Incluso puedes arrancarlo. Simplemente ponga esto en su
<head>:Y luego continúe y agregue algunos enlaces de iconos como este:
Aquí está la hoja de trucos completa
--editar--
Font-Awesome usa diferentes nombres de clase en la nueva versión, probablemente porque esto hace que los archivos CSS sean drásticamente más pequeños y para evitar clases ambiguas de CSS. Entonces ahora deberías usar:
EDITAR 2:
Me acabo de enterar que github también usa su propia fuente de íconos: Octicons Se puede descargar gratis. También tienen algunos consejos sobre cómo crear sus propias fuentes de iconos .
fuente
He podido hacer esto usando el filtro SVG. Puede escribir un filtro que multiplique el color de la imagen de origen con el color al que desea cambiar. En el fragmento de código a continuación, el color de inundación es el color al que queremos cambiar el color de la imagen (que es Rojo en este caso). FeComposite le dice al filtro cómo estamos procesando el color. La fórmula para feComposite con aritmética es (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) donde i1 e i2 son colores de entrada para in / in2 en consecuencia. Entonces, especificar solo k1 = 1 significa que solo hará i1 * i2, lo que significa multiplicar ambos colores de entrada juntos.
Nota: Esto solo funciona con HTML5 ya que está usando SVG en línea. Pero creo que puede hacer que esto funcione con un navegador anterior al poner SVG en un archivo separado. No he probado ese enfoque todavía.
Aquí está el fragmento:
fuente
La etiqueta img tiene una propiedad de fondo como cualquier otra. Si tiene un PNG blanco con una forma transparente, como una plantilla, puede hacer esto:
fuente
Si :)
fuente
En la mayoría de los navegadores , puede usar filtros:
tanto en
<img>elementos como en imágenes de fondo de otros elementosy configúrelos estáticamente en su CSS, o dinámicamente usando JavaScript
Ver demostraciones a continuación.
<img>elementosPuede aplicar esta técnica a un
<img>elemento:Imágenes de fondo
Puede aplicar esta técnica a una imagen de fondo:
JavaScript
Puede usar JavaScript para establecer un filtro en tiempo de ejecución:
fuente
hue-rotateNo funciona en blanco.Creo que tengo una solución para esto que es a) exactamente lo que estaba buscando hace 5 años, yb) es un poco más simple que las otras opciones de código aquí.
Con cualquier png blanco (p. Ej., Icono blanco sobre fondo transparente), puede agregar un selector :: after para cambiar el color.
Consulte este codepen (aplicando el cambio de color al pasar el mouse): http://codepen.io/chrscblls/pen/bwAXZO
fuente
La línea más simple que funcionó para mí:
Puede ajustar la opacidad de 0 a 1 para que el color sea más claro o más oscuro.
fuente
Encontré esto mientras buscaba en Google, encontré el mejor trabajo para mí ...
HTML
CSS
http://jsfiddle.net/a63b0exm/
fuente
Requerí un color específico, por lo que el filtro no funcionó para mí.
En cambio, creé un div, explotando múltiples imágenes de fondo CSS y la función de gradiente lineal (que crea una imagen en sí misma). Si utiliza el modo de mezcla de superposición, su imagen real se combinará con la imagen de "degradado" generada que contiene el color deseado (aquí, # BADA55)
fuente
Respondiendo porque estaba buscando una solución para esto.
la pluma en la respuesta @chrscblls funciona bien si tiene un fondo blanco o negro, pero el mío no. Además, las imágenes se generaron con ng-repeat, por lo que no pude tener su url en mi css Y no puedes usar :: after en las etiquetas img.
Entonces, pensé en solucionarlo y pensé que podría ayudar a las personas si también tropezaban aquí.
Entonces, lo que hice es más o menos lo mismo con tres diferencias principales:
Para cambiarlo de negro a blanco o de blanco a negro, el color de fondo debe ser blanco. Desde el negro hasta los colores, puede elegir el color que prefiera. Desde el blanco hasta los colores, deberá elegir el color opuesto al que desee.
https://codepen.io/spaceplant/pen/oZyMYG
fuente
No es necesario un conjunto completo de fuentes si solo necesita un icono, además creo que es más "limpio" como un elemento individual. Entonces, para este propósito, en HTML5 puede colocar un SVG directamente dentro del flujo de documentos. Luego puede definir una clase en su hoja de estilo .CSS y acceder a su color de fondo con el
fillpropiedad:Violín de trabajo: http://jsfiddle.net/qmsj0ez1/
Tenga en cuenta que, en el ejemplo, he usado
:hoverpara ilustrar el comportamiento; si solo desea cambiar el color para el estado "normal", debe eliminar la pseudoclase.fuente
Para cambiar literalmente el color, puede incorporar una transición CSS con un filtro -webkit donde, cuando ocurra algo, invocaría el filtro -webkit de su elección. Por ejemplo:
fuente
Al cambiar una imagen de negro a blanco, o de blanco a negro, el filtro de rotación de tono no funciona, porque el blanco y negro no son técnicamente colores. En cambio, los cambios de color en blanco y negro (de negro a blanco o viceversa) deben hacerse con la propiedad de filtro invertido.
.img1 { filter: invert(100%); }fuente
Fuente: https://codepen.io/taryaoui/pen/EKkcu
fuente