5

Tengo diferentes imágenes en formato PNG que muestran objetos parecidos pero de diferente tamaño y que uso para superponerlas con una de forma semitransparente para comparar sus tamaños.

¿Es posible hacer que una imagen PNG se vea solo como una sombra/silueta negra usando CSS?

Por ejemplo, que una imagen como ésta:

enter image description here

Se vea así:

enter image description here

0

1 respuesta 1

7

Usando jquery:

$("#newimg").css({
 WebkitFilter: 'grayscale(100%) brightness(0%)'
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.sstatic.net/JJ6Vs.png" id="originalimg" height="150px" width="auto" />
<br>
<img src="https://i.sstatic.net/JJ6Vs.png" id="newimg" height="150px" width="auto" />

Usando css:

#newimg {
    -webkit-filter: grayscale(100%) brightness(0); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%) brightness(0);
}
    <img src="https://i.sstatic.net/JJ6Vs.png" id="originalimg" height="150px" width="auto" />
    <br>
    <img src="https://i.sstatic.net/JJ6Vs.png" id="newimg" height="150px" width="auto" />

1
  • 2
    Perfecto. Esa combinación de filtros me funciona genial. Muchas gracias
    – Alvaro Montoro
    Commented el 6 ene. 2017 a las 23:28

Tu Respuesta

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

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