CSS PNG image silhouette

Question

Does anyone know a way that I can force CSS to make a PNG image with transparency, look completely black as a silhouette?

In other words, based on this:

For this:

This is for many images, so I would like to avoid this with Photoshop.

Answer 1

I tried this code that uses canvas, maybe you could improve it, especially on the lighter pixel inside the apple.

<img id="canvasSource" src="apple.jpg" /> <br /> <canvas id="area" width="264" height="282"></canvas> <!-- Javascript Code --> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("area"); var context = canvas.getContext("2d"); var image = document.getElementById("canvasSource"); context.drawImage(image, 0, 0); var imgd = context.getImageData(0, 0, 264, 282); var pix = imgd.data; var blackpixel = 21; for (var i = 0, n = pix.length; i < n; i += 4) { //console.log(pix[i], pix[i+1], pix[i+2]); if (i > 3) { if ((Math.abs(pix[i-3] - pix[i]) > 10) && (Math.abs(pix[i-2] - pix[i+1]) > 10) && (Math.abs(pix[i-1] - pix[i+2]) > 10) ) { pix[i ] = blackpixel; pix[i+1] = blackpixel; pix[i+2] = blackpixel; } } else { if (pix[i] < 250 && pix[i+1] < 250 && pix[i+2] < 250) { pix[i ] = blackpixel; pix[i+1] = blackpixel; pix[i+2] = blackpixel; } } } context.putImageData(imgd, 0, 0); }; </script> 

Answer 2

You can apply an image style like filter: contrast(0%) brightness(50%) to get a silhouette. Do not forget the consoles.

Answer 3

I do not see how this can be done with pure css. Javascript may be able to improve it, but you can use server-side programming instead. With php, you can duplicate the source png on the server and replace the opaque pixels with one color. It will look like a watermark feature.

Answer 4

Currently, a filter combined into mix-blend-mode can also do:

 span {/* to be used to lay the 'blender mask' over img */ position: relative; display: inline-block; overflow:hidden; } span img { display: block;/* erase gap */ max-width:45vw; filter: contrast(150%); } span + span img { filter: contrast(120%) saturate(0%);/* saturate(0%) is similar to grayscale(100%) */ } span:before { content: ''; z-index: 1; height: 100%; background: white; position: absolute; top: 0; width: 100%; display: block; filter: contrast(10000%) brightness(0) saturate(100%) grayscale(100%); mix-blend-mode: color-burn;/* bake it to black */ animation : span 2s infinite alternate; } @keyframes span { from{ transform:translate(-100%,0) } 25%,50% { transform:translate(0,0); } to{ transform:translate(100%,0) } } 

 <span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span> <span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span>