Ya se que esto se podria hacer con otros programas, pero me ha causado curiosidad en CSS.
Como veran img-amarillo
tiene el mismo filter
que img2-amarillo
, sin embargo en la primera no cambia de color y en la segunda si porque pasa esto?
(los valores que le puse al filter es el HSL del color amarillo)
#img
{background-image: url(http://pluspng.com/img-png/vector-icon-png-free-vector-icons-in-svg-psd-png-eps-format-or-as-icon-font-thousands-of-free-icons-in-the-largest-database-of-free-vector-icons-812.png);
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-size: contain;
background-position: center
}
#img-amarillo
{background-image: url(http://pluspng.com/img-png/vector-icon-png-free-vector-icons-in-svg-psd-png-eps-format-or-as-icon-font-thousands-of-free-icons-in-the-largest-database-of-free-vector-icons-812.png);
width: 200px;
height: 200px;
filter: hue-rotate(60deg) brightness(500%) saturate(100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center
}
#img2
{background-image: url(https://i.stack.imgur.com/fXKdt.png);
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-size: contain;
background-position: center
}
#img2-amarillo
{background-image: url(https://i.stack.imgur.com/fXKdt.png);
width: 200px;
height: 200px;
filter: hue-rotate(60deg) brightness(500%) saturate(100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center
}
<div id="img"></div>
<div id="img-amarillo"></div>
<div id="img2"></div>
<div id="img2-amarillo"></div>
`
#img-amarillo
) has puestofilter:filter:
. Tienes un error tipográfico, propongo el cierre de la pregunta.