Cambiar de color una imagen png con fondo transparente

publicado por: Anonymous

tengo una imagen de una estrella color azul cielo, quisiera cambiarle el color a la estrella solamente.

_x000D_

_x000D_

#estrella img{_x000D_
	height: 35px;_x000D_
}

_x000D_

</html>_x000D_
<head>_x000D_
<title>Cambiar el color de la imagen</title>_x000D_
</head>_x000D_
	<div id="estrella"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>_x000D_
</html>

_x000D_

_x000D_

_x000D_

¿Como podria hacer este cambio utilizando reglas css?

solución

Para cosas como esta, está SVG.

No tiene sentido que utilices una imagen externa cuando puedes ahorrarte esa solicitud HTTP y además hacerlo más mantenible.

MARCADO:


Primero definimos nuestra estrella utilizando la marca <path>:

<path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>

Es importante que utilices la variable de CSS currentColor en el atributo fill de <path> para poder cambiar el color de tu icono con la propiedad color en CSS.


Ya que tenemos nuestra estrella, la envolveremos en la marca <symbol> y le daremos un id para poder utilizarla en unos pasos más adelante. Puedes agregar un título para ayudar en temas de accesibilidad. (Info sobre viewBox aquí)

 <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>

Después, haremos nuestra hoja de sprites para utilizarla como contenedor si quisiéramos agregar más iconos. Le daremos un id para ocultar el elemento en CSS por cuestiones de que en algunos exploradores muestra un espacio en blanco no deseado.

<svg id="spriteSheet">
  <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

Ya que tenemos nuestro marcado de SVG, podemos pasar a utilizarlo con la etiqueta <use> de la siguiente manera:

<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>

Aquí le daremos una clase general de nivel bloque y un modificador. Dentro de la etiqueta <use> referenciamos nuestro símbolo llamando su id.

Cada vez que quieras utilizar este icono simplemente pegas este pedazo de código.


ESTILO:

¿Recuerdas las clases que definimos anteriormente en nuestro <svg>?

icono icono--estrella

Éstas nos ayudarán a darle estilo a nuestro elemento.

.icono {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.icono--estrella {
  font-size: 4em; /* Este es el tamaño del icono */
  color: lightblue; /* Este es el color del icono*/
}

Y simplemente ocultamos nuestra hoja de sprites.

#spriteSheet {
  display: none;
}

Y listo!


FRAGMENTO DE CÓDIGO:

_x000D_

_x000D_

#spriteSheet {_x000D_
  display: none;_x000D_
}_x000D_
.icono {_x000D_
  display: inline-block;_x000D_
  width: 1em;_x000D_
  height: 1em;_x000D_
}_x000D_
.icono--estrella {_x000D_
  font-size: 4em;_x000D_
  color: lightblue;_x000D_
}_x000D_
.icono--estrella:nth-child(2) {_x000D_
  color: red;_x000D_
}_x000D_
.icono--estrella:nth-child(3) {_x000D_
  color: green;_x000D_
}_x000D_
.icono--estrella:nth-child(4) {_x000D_
  color: yellow;_x000D_
}

_x000D_

<svg class="icono icono--estrella">_x000D_
  <use xlink:href="#iconoEstrella"></use>_x000D_
</svg>_x000D_
<svg class="icono icono--estrella">_x000D_
  <use xlink:href="#iconoEstrella"></use>_x000D_
</svg>_x000D_
<svg class="icono icono--estrella">_x000D_
  <use xlink:href="#iconoEstrella"></use>_x000D_
</svg>_x000D_
<svg class="icono icono--estrella">_x000D_
  <use xlink:href="#iconoEstrella"></use>_x000D_
</svg>_x000D_
_x000D_
<svg id="spriteSheet">_x000D_
  <symbol id="iconoEstrella" viewBox="0 0 32 32">_x000D_
    <title>Estrella</title>_x000D_
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>_x000D_
  </symbol>_x000D_
</svg>

_x000D_

_x000D_

_x000D_


Más sobre esta técnica aquí.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *