¿Cambiar el color de la imagen PNG mediante CSS?

(10)

Editar-- Font-Awesome usa diferentes nombres de clases en nueva versión

, probablemente porque hace que los archivos CSS sean significativamente más pequeños y evita clases CSS ambiguas. Entonces ahora deberías usar: No es necesario escribir toda la fuente si solo quieres un ícono, además siento que es más "limpio" como elemento separado

. Entonces, para este propósito en HTML5 puedes colocar el SVG directamente dentro del flujo de documentos. Luego puedes definir la clase en la hoja de estilo .CSS y acceder a su color de fondo usando la propiedad de relleno:

Tenga en cuenta que en el ejemplo utilicé :hover para ilustrar el comportamiento; Si sólo desea cambiar el color del estado "normal", debe eliminar la pseudoclase.

Respondiendo porque estaba buscando una solución para esto.

El usuario en @chrscblls responde bien si tienes un fondo blanco o negro, pero yo no. Además, las imágenes se generaron usando ng-repeat, por lo que no pude tener mi URL en mi CSS y no puedes usar ::after en etiquetas img.

Así que decidí intentarlo y pensé que podría ayudar a las personas si también se encuentran tropezándose por aquí.

• Entonces hice casi lo mismo con tres diferencias principales:
• URL ubicada en mi etiqueta img, la puse (y la etiqueta) en otro div que tiene:: after work.
• "mix-blend-mode" está configurado en "diferencia" en lugar de "multiplicar" o "pantalla".

Para cambiarlo de negro a blanco o de blanco a negro, el color de fondo debe ser blanco. Desde negro hasta color, puedes elegir cualquier color. Del blanco al color, debes elegir el color opuesto al que deseas.

DivClass( posición: relativa; ancho: 100%; alto: 100%; alineación de texto: izquierda; ) .divClass:hover::después, .divClass:hover::before( posición: absoluta; ancho: 100%; alto: 100%; fondo: #FFF; modo de mezcla: diferencia: "";

Las etiquetas img tienen una propiedad de fondo como cualquier otra. Si tienes un PNG blanco con una forma transparente, como una plantilla, puedes hacer esto:

Para cambiar literalmente el color, puede habilitar una transición CSS con un filtro -webkit, donde cuando suceda algo utilizará el filtro -webkit de su elección. Por ejemplo:

Img ( -webkit-filter:escala de grises(0%); transición: -webkit-filter .3s lineal; ) img:hover ( -webkit-filter:escala de grises(75%); )

Encontré este excelente ejemplo de codepen que se inserta en un valor. color hexagonal, y devuelve el filtro necesario para aplicar ese color al png

por ejemplo necesitaba que mi png tuviera el siguiente color #1a9790

entonces deberías aplicarte el siguiente filtro png

Filtro: invertir (48 %) sepia (13 %) saturar (3207 %) rotar tono (130 grados) brillo (95 %) contraste (80 %);

Pude hacer esto usando un filtro SVG. Puedes escribir un filtro que multiplique el color de la imagen original por el color que deseas cambiar. En el siguiente fragmento de código color de inundación es el color que queremos cambiar el color de la imagen (en en este caso es rojo). FeComposite le dice al filtro cómo procesamos el color. La fórmula feComposite con aritmética es (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) donde i1 e i2 son los colores de entrada para in/in2 respectivamente. Entonces, especificar solo k1 = 1 significa que solo hará i1 * i2, lo que significa multiplicar ambos colores de entrada.

Nota. Esto sólo funciona con HTML5 porque utiliza SVG en línea. Pero creo que puedes hacer que esto funcione con un navegador más antiguo colocando el SVG en un archivo separado. No he probado este enfoque todavía.

Aquí hay un fragmento:

realmente existe Muchas formas de cambiar el color de un objeto en Photoshop.. Anteriormente, ya vimos cómo hacer esto usando y también aprendimos cómo cambiar el color del cabello en Photoshop usando.

Estos no son todos métodos, hoy mostraré dos muy simples y en artículos futuros hablaré sobre un par de métodos más usando otras capas de ajuste.

Método número 1

Hablaré brevemente sobre la aplicación de este método. Abre la imagen y crea una nueva capa (te recuerdo todas las técnicas).

Luego cambie el modo de fusión de esta capa seleccionando Tono en la lista desplegable en la parte superior de la paleta Capas (ubicada en la parte inferior de la lista).

Después de eso, seleccione presionando la tecla B, haga clic en el indicador de color de primer plano, en el cuadro de diálogo de la paleta que aparece, seleccione un tono y haga clic en el botón Aceptar. Habiendo seleccionado previamente una nueva capa, dibuja sobre el objeto.

Si pinta sobre el exceso, puede seleccionar temporalmente la herramienta Borrador presionando y manteniendo presionada la tecla E. Puede evitar este tipo de situaciones de antemano agregando una máscara de capa a la nueva capa y ocultando con negro las áreas que no es necesario cambiar.

Nota

Si el área que estás repintando está rodeada de negro, blanco y gris, puedes pintar con seguridad sobre este último y no cambiarán en absoluto. Esto se debe a que en el modo de fusión Tono, las áreas llenas de color solo afectan aquellas áreas de la capa subyacente que ya contienen color.

Método número 2

¿Recuerdas el comando del menú? Comando de menú similar Reemplazar color se puede utilizar para resaltar un tono y reemplazarlo por otro. Este comando funciona muy bien si el color que hay que sustituir es más o menos uniforme y concentrado en una zona determinada, como la carrocería del coche de la imagen de arriba.

Seleccionar el comando del menú Imagen - Corrección - Reemplazar color, verá un cuadro de diálogo con el mismo nombre.

Ya tiene seleccionada la herramienta Cuentagotas, así que haz clic en la sombra de la imagen que deseas reemplazar. Aparecerá en un cuadrado con la inscripción Color en el grupo de control Selección en la parte superior del cuadro de diálogo.

En el grupo de control Reemplazo en la parte inferior del cuadro de diálogo, haga clic en el cuadrado ubicado encima de la inscripción Resultado para seleccionar un nuevo tono. Cuando haces clic en el botón Aceptar. Si necesita ajustar el tono seleccionado, puede usar los controles deslizantes tono de color, Saturación Y Brillo(también se encuentra en el grupo de control de Selección). Esto es lo que pasó:

Tenga en cuenta que, además de la pipeta normal, hay pipetas con pequeños iconos “+” (más) y “-” (menos) cerca. Utilícelos para ampliar/reducir la gama de tonos que deben cambiarse.

Como puedes ver, me excedí un poco y las ruedas de mi auto también se pusieron moradas. Esto sugiere que este método Puede que no siempre sea útil.

Si nota un error en el texto, selecciónelo y presione Ctrl + Enter. ¡Gracias!

Si necesita editar un archivo en formato PNG, muchos se apresuran a descargar Photoshop, que no solo se distribuye por una tarifa, sino que también requiere bastante recursos informáticos. No todas las PC antiguas son capaces de ejecutar esta aplicación. En tales casos, varios editores en línea acuden al rescate, permitiéndole cambiar el tamaño, escalar, comprimir y realizar muchas otras operaciones con archivos.

Hoy veremos los sitios más funcionales y estables que le permiten trabajar con imágenes en formato PNG. Las ventajas de estos servicios en línea incluyen el hecho de que no exigen recursos de su computadora, ya que todas las manipulaciones con archivos se realizan utilizando tecnologías en la nube.

No es necesario instalar editores en línea en su PC; esto reduce significativamente la probabilidad de contraer un virus.

Método 1: editor de imágenes en línea

El servicio más funcional y estable que no molesta a los usuarios con publicidad intrusiva. Adecuado para cualquier manipulación con Imágenes PNG, que no exige absolutamente ningún recurso de su computadora, se puede ejecutar en dispositivos móviles.

Las desventajas del servicio incluyen la falta de idioma ruso, sin embargo, con un uso prolongado esta desventaja se vuelve imperceptible.

El sitio no requiere registro; es fácil entender el servicio, incluso si no sabes inglés. No tengas miedo de experimentar, si algo sale mal, siempre puedes deshacerlo con solo hacer clic en un botón.

Método 2: Photoshop en línea

Los desarrolladores posicionan su servicio como Photoshop online. La funcionalidad del editor es muy similar a la de la mundialmente famosa aplicación: admite trabajar con imágenes en diferentes formatos, incluido PNG; Si alguna vez ha trabajado con Photoshop, no le resultará difícil comprender la funcionalidad del recurso.

El único inconveniente, aunque bastante importante, del sitio es la congelación constante, especialmente si trabaja con imágenes grandes.

Al realizar manipulaciones sencillas, trabajar con el servicio es cómodo y cómodo. Si necesita procesar un archivo grande, es recomendable descargar e instalar un especial software, o tenga paciencia y prepárese para constantes congelaciones del sitio.

Método 3: Fotor

Fotor, un sitio conveniente, funcional y, lo más importante, gratuito para trabajar con imágenes en formato PNG, le permite recortar, rotar, agregar efectos y usar otras herramientas. La funcionalidad del recurso se probó en archivos de diferentes tamaños y no se encontraron problemas. El sitio ha sido traducido al ruso; en la configuración puede seleccionar un idioma diferente para la interfaz del editor si es necesario.

Acceso a funciones adicionales se proporciona a los usuarios solo después de comprar una cuenta PRO.

Fotor es una potente herramienta para trabajar con PNG: además de un conjunto de funciones básicas, contiene muchos efectos adicionales que satisfarán incluso al usuario más exigente.

Los editores de fotografías en línea son fáciles de usar; no requieren instalación en una computadora, por lo que puedes acceder a ellos incluso con dispositivo móvil. Depende de usted qué editor utilizar.

Lo principal es indicar la imagen en su computadora o teléfono, seleccionar los colores deseados para reemplazar, hacer clic en Aceptar en la parte inferior de la página, esperar un par de segundos y descargar el resultado final.

Foto de una rosa sin cambios y con el color rosa sustituido por: violeta, azul, turquesa, verde Y amarillo:


Para crear los ejemplos anteriores, se utilizaron las siguientes configuraciones: " Color de repuesto" - "rosa", " Color para reemplazar con" - "púrpura" (para el siguiente procesamiento "azul", etc.), " Intensidad de reemplazo de color" - "45".

Si todo se vuelve monocromático, se reemplaza demasiado o se ven afectados otros colores, entonces es necesario reducir la “Intensidad de reemplazo de color”. Por el contrario, si no se ven cambios o el color no se reemplaza por completo, entonces debe aumentar la "Intensidad de reemplazo de color" y también asegurarse de haber especificado los colores correctamente y no haber confundido, por ejemplo, el rojo con el rosa. Para especificar el color con mayor precisión, puede utilizar el formato HEX. La configuración puede ser diferente para diferentes imágenes; depende tanto del color como del tamaño de píxel.

Tenga en cuenta que no puede reemplazar negro, gris o blanco en algunos color rico, pero puedes reemplazar el color saturado con un color casi blanco, negro o gris. En pocas palabras, puede reemplazar cualquier color del arco iris o cerca de los colores que están disponibles en las listas desplegables de la configuración. La razón de esto es que el algoritmo de reemplazo de color está asociado con un cambio de tono, que no afecta las imágenes en escala de grises o en blanco y negro. Si necesita procesar una imagen grande de más de 14 megapíxeles (≈4592x3048), envíela al buzón con la configuración que necesita; se realizará de forma gratuita dentro de las 24 horas.

La imagen original no se modifica de ninguna manera. Se le proporcionará otra imagen procesada.