Cambiar el color de la imagen PNG a través de CSS?

Dado un PNG transparente que muestra una forma simple en blanco, ¿es posible cambiar el color de alguna manera a través de CSS? ¿Algún tipo de superposición o qué no?

Puede usar filtros por -webkit-filter y filter : los filtros son muy nuevos para los navegadores y solo son compatibles con los navegadores más modernos. Puede cambiar una imagen a escala de grises, sepia y mucho más (mire el ejemplo).

Entonces ahora puede cambiar el color de un archivo PNG con filtros.

 body { background-color:#03030a; min-width: 800px; min-height: 400px } img { width:20%; float:left; margin:0; } /*Filter styles*/ .saturate { filter: saturate(3); } .grayscale { filter: grayscale(100%); } .contrast { filter: contrast(160%); } .brightness { filter: brightness(0.25); } .blur { filter: blur(3px); } .invert { filter: invert(100%); } .sepia { filter: sepia(100%); } .huerotate { filter: hue-rotate(180deg); } .rss.opacity { filter: opacity(50%); } 
  Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa 

Es posible que desee echar un vistazo a las fonts Icon. http://css-tricks.com/examples/IconFont/

EDITAR: estoy usando Font-Awesome en mi último proyecto. Incluso puedes arrancarlo. Simplemente ponga esto en su :

    

Y luego continúe y agregue algunos enlaces de icons 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:

  

EDICION 2:

Acaba de descubrir que github también usa su propia fuente de icono: Octicons. Se puede descargar gratis. También tienen algunos consejos sobre cómo crear tus propias fonts de íconos .

La etiqueta img tiene una propiedad de fondo como cualquier otra. Si tiene un PNG blanco con una forma transparente, como una galería de símbolos, puede hacer esto:

  

Sí 🙂

Surfin ‘Safari – Blog Archive »CSS Máscaras

WebKit ahora es compatible con 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 porciones de ese cuadro en la pantalla final. En otras palabras, puede recortar en 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 fondo e imagen de borde que ya existen.

 -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image) 

Pude hacer esto usando el filtro SVG. Puede escribir un filtro que multiplica el color de la imagen de origen con el color que desea cambiar. En el siguiente fragmento de código, el color de inundación es el color al que queremos cambiar el color de la imagen (que en este caso es rojo). 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. Por lo tanto, 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 usa SVG en línea. Pero creo que puede hacer que esto funcione con un navegador más antiguo al colocar SVG en un archivo separado. No he intentado ese enfoque todavía.

Aquí está el fragmento:

                            

En la mayoría de los navegadores , puede usar filtros:

  • en ambos elementos e imágenes de fondo de otros elementos

  • y configurarlos estáticamente en su CSS, o dinámicamente usando JavaScript

Ver demostraciones a continuación.


elementos

Puede aplicar esta técnica a un elemento :

 #original, #changed { width: 45%; padding: 2.5%; float: left; } #changed { -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); } 
   

Creo que tengo una solución para esto que es a) exactamente lo que estabas buscando hace 5 años, yb) es un poco más simple que las otras opciones de código aquí.

Con cualquier png blanco (por ejemplo, icono blanco sobre fondo transparente), puede agregar un selector :: after para volver a colorear.

 .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 */ } 

Vea este códec (aplicando el cambio de color al desplazarse): http://codepen.io/chrscblls/pen/bwAXZO

Encontré este gran ejemplo de codepen en el que insertas tu valor de color hexadecimal y devuelve el filtro necesario para aplicar este color a png

Generador de filtros CSS para convertir de color negro a blanco

por ejemplo, necesitaba mi png para tener el siguiente color # 1a9790

entonces debes aplicar el siguiente filtro a tu png

 filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%); 

Necesité un color específico, así que el filtro no funcionó para mí.

En cambio, creé un div, explotando múltiples imágenes de fondo de CSS y la función de gradiente lineal (que crea una imagen). Si usa el modo de fusión superpuesta, su imagen real se mezclará con la imagen “gradiente” generada que contiene el color deseado (aquí, # BADA55)

 .colored-image { background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png"); background-blend-mode: overlay; background-size: contain; width: 200px; height: 200px; } 
 

No es necesario un conjunto completo de fonts si solo necesita un ícono, y creo que es más “limpio” como 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 estilos .CSS y acceder a su color de fondo con la propiedad fill :

Violín de trabajo: http://jsfiddle.net/qmsj0ez1/

Tenga en cuenta que, en el ejemplo, he usado :hover para ilustrar el comportamiento; si solo desea cambiar el color para el estado “normal”, debe eliminar la pseudoclass.

Respondiendo porque estaba buscando una solución para esto.

el bolígrafo en @chrscblls answer funciona bien si tienes un fondo blanco o negro, pero el mío no. Aslo, las imágenes se generaron con ng-repeat, por lo que no pude tener su url en mi css Y no puedes usar :: after on img tags.

Así que pensé en un trabajo alternativo y pensé que podría ayudar a la gente si ellos 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 ‘mix-blend-mode’ se establece en ‘diferencia’ en lugar de ‘multiplicar’ o ‘pantalla’.
  • Agregué un :: antes con exactamente el mismo valor, así que :: :: after haría la “diferencia” de la “diferencia” hecha por el :: before y se canceló.

Para cambiarlo de negro a blanco o de blanco a negro, el color de fondo debe ser blanco. Del negro a los colores, puedes elegir cualquier color. Desde el blanco hasta los colores, deberás elegir el color opuesto al que quieras.

 .divClass{ position: relative; width: 100%; height: 100%; text-align: left; } .divClass:hover::after, .divClass:hover::before{ position: absolute; width: 100%; height: 100%; background: #FFF; mix-blend-mode: difference; content: ""; } 

https://codepen.io/spaceplant/pen/oZyMYG

Para cambiar literalmente el color, podría incorporar una transición de CSS con un filtro de sitio web donde, cuando ocurra algo, invocará el filtro -webkit de su elección. Por ejemplo:

 img { -webkit-filter:grayscale(0%); transition: -webkit-filter .3s linear; } img:hover { -webkit-filter:grayscale(75%); }