una - poner color a imagen css




¿Cambiar el color de la imagen PNG vía CSS? (10)

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

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?


En la caniuse.com/#feat=css-filters , puedes usar filtros:

  • tanto en los elementos <img> como en las imágenes de fondo de otros elementos

  • y 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é 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');
}

http://jsfiddle.net/a63b0exm/


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 .


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.


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%);
    }

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: "";
}

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


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)




overlay