3

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>

`

6
  • En la primera (#img-amarillo) has puesto filter:filter:. Tienes un error tipográfico, propongo el cierre de la pregunta. el 27 feb. 2018 a las 15:48
  • ya lo corregi pero sigue igual el 27 feb. 2018 a las 15:49
  • Ok, retiro el voto de cierre y miro de nuevo. el 27 feb. 2018 a las 15:50
  • Vale, el problema es que el filtro en la imagen negra no hace nada. el 27 feb. 2018 a las 15:52
  • Bueno tienes razon al haber probado con otra imagen de color rojo surgio el efecto que queria, gracias el 27 feb. 2018 a las 15:56

1 respuesta 1

5

El problema que sufres es debido a que los colores blancos y negros puros no tienen definido el matiz (puede ser cualquiera), por lo que el giro no los afecta.

Multiplicar por 5 el brillo del negro (500%) no tiene tampoco efecto (0 x 5 = 0).

En la segunda imagen sí funciona porque el rojo (0º) al girarlo 60º da amarillo:

círculo cromático

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.