poner - invertir color de imagen con css
¿Cambiar el color de la imagen PNG vía CSS? (14)
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?
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 después para recolorear.
.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ódigo de código (aplicando el cambio de color al desplazar): http://codepen.io/chrscblls/pen/bwAXZO
En la caniuse.com/#feat=css-filters , puedes usar filtros:
tanto en los elementos
<img>como en las imágenes de fondo de otros elementosy configúralos de forma estática en tu CSS, o dinámicamente usando JavaScript
Ver demos abajo.
<img> elementos
Puedes aplicar esta técnica a un elemento <img> :
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
Imagenes de fondo
Puedes aplicar esta técnica a una imagen de fondo:
#original, #changed {
background: url(''http://i.stack.imgur.com/kaKzj.jpg'');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}
<div id="original"></div>
<div id="changed"></div>
JavaScript
Puede usar JavaScript para establecer un filtro en tiempo de ejecución:
var element = document.getElementById("changed");
var filter = ''hue-rotate(120deg) saturate(2.4)'';
element.style[''-webkit-filter''] = filter;
element.style[''filter''] = filter;
#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url(''http://i.stack.imgur.com/856IQ.png'');
background-size: cover;
padding-bottom: 25%;
}
<div id="original"></div>
<div id="changed"></div>
Encontré este gran ejemplo de código que inserta su valor de color hexadecimal y devuelve el filtro necesario para aplicar este color a png
Generador de filtro 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 ti png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
Encontré esto mientras buscaba en Google, lo mejor fue trabajar para mí ...
HTML
<div class="img"></div>
CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url(''http://i.stack.imgur.com/gZvK4.png'');
}
Es posible que desee echar un vistazo a las fuentes de icono. http://css-tricks.com/examples/IconFont/
EDITAR: Estoy usando Font-Awesome en mi último proyecto. Incluso puedes arrancarlo. Simplemente ponga esto en su <head> :
<link href="//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="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
Y luego adelante y agrega algunos íconos como este:
<a class="icon-thumbs-up"></a>
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 de css ambiguas. Así que ahora deberías usar:
<a class="fa fa-thumbs-up"></a>
EDIT 2:
Acabo de descubrir que github también usa su propia fuente de icono: Octicons Es gratis para descargar. También tienen algunos consejos sobre cómo crear sus propias fuentes de iconos .
He podido hacer esto usando el filtro SVG. Puede escribir un filtro que multiplique el color de la imagen de origen con el color que desea cambiar. En el fragmento de código a continuación, el color de la 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 procesamos 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 utiliza SVG en línea. Pero creo que podrías hacer que esto funcione con un navegador más antiguo al colocar SVG en un archivo separado. No he probado ese enfoque todavía.
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 etiqueta img tiene una propiedad de fondo como cualquier otra. Si tienes un PNG blanco con una forma transparente, como una plantilla, entonces puedes hacer esto:
<img src= ''stencil.png'' style= ''background-color: red''>
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 hacer que el color sea más claro o más oscuro.
Necesitaba un color específico, así que el filtro no me funcionó.
En su lugar, creé un div, explotando varias imágenes de fondo CSS y la función de gradiente lineal (que crea una imagen en sí misma). Si usa el modo de mezcla de superposición, su imagen real se combinará con la imagen "degradada" 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;
}
<div class="colored-image"></div>
No es necesario un conjunto de fuentes completo si solo necesita un icono, además siento que es más "limpio" como elemento individual. Por lo tanto, 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 la propiedad de fill :
Fiddle 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 pseudoclase.
Para cambiar literalmente el color, puede incorporar una transición de CSS con un filtro -webkit donde, cuando ocurra algo, invoque 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%);
}
Puede usar filtros con -webkit-filter y filter : los filtros son muy nuevos para los navegadores y solo son compatibles con los navegadores muy modernos. Puede cambiar una imagen a escala de grises, sepia y mucho más (vea el ejemplo).
Así que 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="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">
Respondiendo porque estaba buscando una solución para esto.
La respuesta de la pluma en @chrscblls funciona bien si tienes un fondo blanco o negro, pero el mío no. Además, las imágenes se generaron con ng-repeat, así que no pude tener su url en mi css Y no se puede usar :: after en img tags.
Entonces, pensé en una solución y pensé que podría ayudar a la gente si también tropiezan aquí.
Entonces, lo que hice es casi lo mismo con tres diferencias principales:
- la url está en mi etiqueta img, la puse (y una etiqueta) en otra div en la que :: después funcionará.
- el ''modo de mezcla de mezcla'' se establece en ''diferencia'' en lugar de ''multiplicar'' o ''pantalla''.
- Agregué un :: antes con exactamente el mismo valor, de modo que el :: después haría la ''diferencia'' de la ''diferencia'' hecha por el :: antes y se cancelaba.
Para cambiarlo de negro a blanco o de blanco a negro, el color de fondo debe ser blanco. Desde el negro hasta los colores, puedes elegir cualquier color. Desde el blanco hasta los colores, tendrás que 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: "";
}
Si :)
Surfin ''Safari - Blog Archive »Máscaras CSS
WebKit ahora soporta 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 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 fondo y de 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)