Silhouette a PNG image using CSS - css

Question

Anyone know of a way that I can get CSS to make a PNG image with transparency look completely blacked out like a silhouette?
In other words-
Going from something like this:
To this:
It's for a lot of images which is why I'd like to avoid doing it via Photoshop.

Answer 1

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

Answer 2

I don't see how it could be done with pure css. Javascript might be able to acheive it but you may consider using server side programming instead. With php you could make a duplicate of your original png on the server and replace the non-transparent pixels with a single color. It would be similar to a watermarking function.

Answer 3

I tried this code that uses a canvas, maybe you could refine it especially on 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 4

Nowdays, filter combined to mix-blend-mode could do too :
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>