Webkit Mask example

HTML

<div id="dog">
    <img src="http://openclipart.org/image/800px/svg_to_png/1667/johnny_automatic_robot_dog.png" alt="Robo Dog!" />
</div>

CSS

html, body {
    height: 100%;
    overflow: auto;
}
body {
    margin: 0;

}
#dog img {
    width: 200px;
    vertical-align: top;
}
#dog {
    position: relative;
    }
    #dog:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .4);
        -webkit-mask-image: url(http://openclipart.org/image/800px/svg_to_png/1667/johnny_automatic_robot_dog.png);
        -webkit-mask-size: 100% 100%;
    }