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

12 minutos de lectura

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

  • Puedes configurar background-color Propiedad CSS. Puede crear una parte no transparente que se arreglará 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

    14 de septiembre de 2011 a las 11:58

  • @qbk, vale la pena una respuesta, no solo un comentario. Y me ganaste por 1 segundo, técnicamente.

    – Artista desconocido

    14 de septiembre de 2011 a las 11:59

  • Puede usar pseudoelementos 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

    30/09/2016 a las 18:58


  • Para aquellos que buscan una respuesta real y actualizada que no involucre esos espantosos “filtros” que no están diseñados para esto, no busquen más: stackoverflow.com/a/32736304/671092 Puede omitir el resto : de nada.

    – gd1

    14 de febrero de 2021 a las 21:09


avatar de usuario
РАВИ

Puedes usar filtros con -webkit-filter y filter: Los filtros son relativamente nuevos para los navegadores, pero son compatibles con más del 90 % de los navegadores, según la siguiente tabla de CanIUse: https://caniuse.com/#feat=css-filtros

Puedes cambiar una imagen a escala de grises, sepia y mucho más (mira el ejemplo).

Ahora puedes 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%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

Fuente

  • La respuesta tan breve es que no existe una solución general para la mayoría de los navegadores.

    – Trilarión

    10 de julio de 2014 a las 8:42

  • Pero, ¿huerotar o saturar realmente le hará algo a una imagen blanca?

    – Keith

    28 de febrero de 2016 a las 23:05

  • Actualización de 2016: esto ahora funciona en casi todos los navegadores excepto IE: caniuse.com/#feat=css-filtros

    – Stan

    10/03/2016 a las 19:59

  • @datatype_void A veces no controlas tú mismo 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.

    – Mejor imposible

    19 de julio de 2016 a las 12:15

  • También especifica que puedes hacer cosas como esta: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); } lo que significa que PUEDE pasar de negro y transparente o escala de grises a color y funciona incluso en gifs animados

    – tatsu

    20 de septiembre de 2017 a las 8:51

avatar de usuario
Fadi Abo Msalam

Encontré este gran ejemplo de codepen en el que insertas tu color hexadecimal valor 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 aplicarte el siguiente filtro png

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

PD: El codepen se basa en esta brillante respuesta de MultiplyByZer0 aquí: Cómo transformar el negro en cualquier color dado usando solo filtros CSS

todos los creditos son para el :clap:

  • He cambiado de color a blanco desde azul usando este código: filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

    – Anjan Biswas

    21 de enero de 2019 a las 6:51

  • Autor merece una estatua! (tenga en cuenta el: brillo (0) saturación (100%) prefijo opcional que elimina cualquier duda)

    – Jackie Degl’Innocenti

    7 ago. 2019 a las 16:07


  • no funciona El navegador muestra todos los filtros uno por uno y permanece en contraste.

    – Mega

    28 de agosto de 2019 a las 11:56

  • Si alguien lo necesita, aquí hay una conversión TS de este código gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08

    – dwjohnston

    15 oct 2019 a las 23:45

  • Esto funciona para fondos o imágenes negras. Para los elementos blancos, intente jugar con el parámetro de inversión para obtener el color adecuado.

    – ojathelonius

    7 sep 2020 a las 16:21


avatar de usuario
jules colle

Es posible que desee echar un vistazo a las fuentes de iconos. http://css-tricks.com/examples/IconFont/

EDITAR: estoy usando Fuente impresionante en mi último proyecto. Incluso puedes arrancarlo. Simplemente ponga esto en su <head>:

<link href="https://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 -->
<link href="https://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 íconos como este:

<a class="icon-thumbs-up"></a>

Aquí esta 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 CSS ambiguas. Así que ahora deberías usar:

<a class="fa fa-thumbs-up"></a>

EDITAR 2:

Acabo de descubrir que github también usa su propia fuente de iconos: octicones
Es gratis para descargar. También tienen algunos consejos sobre cómo crear tus propias fuentes de iconos.

  • +1 por pensar fuera de la caja. Y hoy en día existen aplicaciones en línea fáciles de usar para ayudarlo a crear una fuente web a partir de una imagen (svg).

    – yvan vander sanden

    26 mayo 2015 a las 13:25

  • Si es el nombre de la clase anterior y 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-thumbs-up, agregue al menos 1 byte adicional a ese archivo CSS si no me equivoco.

    – brandito

    28 de mayo de 2018 a las 6:37

  • Font Awesome fue excelente en su día, desafortunadamente su bloqueo de procesamiento, lo que hace que Google y sus usuarios no estén contentos. 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 eliminarlo por completo y reemplazarlo con un sprite simple, que no bloquea el renderizado (DOM y CSSOM 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 6 KB. FA es de alrededor de 100 KB. Las máscaras CSS pueden ayudar en nuestro caso, pero probablemente sean innecesarias.

    – YK

    30 de agosto de 2018 a las 2:33

avatar de usuario
Vasan Jiaramaneethesin

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, 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 usa SVG en línea. Pero creo que podría hacer que esto funcione con un navegador más antiguo colocando SVG en un archivo separado. Todavía no he probado ese enfoque.

Aquí está el fragmento:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

La línea más simple que funcionó para mí:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

Puede ajustar la opacidad de 0 a 1 para que el color sea más claro o más oscuro.

  • repita la sombra paralela 2-3 veces para que sea más fuerte

    – djdance

    21 oct 2019 a las 18:42

  • SOLUCIÓN GENIAL, se ve un poco desordenado en el CSS, pero con un comentario, es perfectamente comprensible. ¡Gracias!

    – Richard KeMiKaL GENERAL Denton

    3 de diciembre de 2019 a las 15:33


  • no funciona para obtener el color exacto, siempre es una especie de mezcla entre el color original y el nuevo.

    – suizo suizo

    17 de febrero de 2020 a las 2:20


  • este enfoque distorsiona ligeramente la imagen y empeora cada vez que se aplica una sombra paralela. Como hacer una copia de una copia, los resultados son diferentes al original.

    – SMAG

    21 de febrero de 2020 a las 21:21

  • @swisswiss No repita la sombra paralela, agregue un filtro saturado con> 100% para que se vea como “filtro: opacidad (0.5) sombra paralela (0 0 0 azul) saturar (1000%)”; Esto hace todo con un solo paso que resolverá el problema que plantea SMAG.

    – Nosajimiki

    10 de octubre de 2020 a las 4:28

avatar de usuario
Comunidad

Sí 🙂

Surfin’ Safari – Archivo del blog » Máscaras CSS

WebKit ahora admite máscaras alfa en CSS. Las máscaras le permiten superponer el contenido de un cuadro con un patrón que se puede usar para eliminar partes de ese cuadro en la visualización final. En otras palabras, puede recortar formas complejas según el alfa de una imagen.
[…]

Hemos introducido nuevas propiedades para proporcionar a los diseñadores web mucho 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)

  • repita la sombra paralela 2-3 veces para que sea más fuerte

    – djdance

    21 oct 2019 a las 18:42

  • SOLUCIÓN GENIAL, se ve un poco desordenado en el CSS, pero con un comentario, es perfectamente comprensible. ¡Gracias!

    – Richard KeMiKaL GENERAL Denton

    3 de diciembre de 2019 a las 15:33


  • no funciona para obtener el color exacto, siempre es una especie de mezcla entre el color original y el nuevo.

    – suizo suizo

    17 de febrero de 2020 a las 2:20


  • este enfoque distorsiona ligeramente la imagen y empeora cada vez que se aplica una sombra paralela. Como hacer una copia de una copia, los resultados son diferentes al original.

    – SMAG

    21 de febrero de 2020 a las 21:21

  • @swisswiss No repita la sombra paralela, agregue un filtro saturado con> 100% para que se vea como “filtro: opacidad (0.5) sombra paralela (0 0 0 azul) saturar (1000%)”; Esto hace todo con un solo paso que resolverá el problema que plantea SMAG.

    – Nosajimiki

    10 de octubre de 2020 a las 4:28

avatar de usuario
chrscblls

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 (p. ej., icono blanco sobre fondo transparente), puede agregar un selector ::después 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 */
}

Vea este codepen (aplicando el cambio de color al pasar el mouse): http://codepen.io/chrscblls/pen/bwAXZO

  • Reubiqué la imagen fuera de imgur, estaba teniendo algunos problemas para cargarla.

    – chrscblls

    7 oct 2016 a las 17:29

  • En la última versión de Chrome, parece que el fondo (transparente) también se está configurando en el color. En el ejemplo vinculado, cuando paso el mouse, solo veo un cuadrado rosa opaco… Funciona bien en Firefox.

    – logidelico

    5 de junio de 2017 a las 15:49

  • @chrscblls El enlace está muerto.

    – Steven Lu

    2 de julio de 2018 a las 17:40


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad