Change image color depending on background

I need for my project to create an image object that changes colors when it is in front of another specific element and still allows me to move it around so my layout remains fluid. It is no problem if I need to have to files of the image with different colors. Could anyone tell me if this technique has a name or point me to in some direction on how to achieve this.

Here is an example of how the effect should work

https://i.sstatic.net/ljQ0j.jpg

I was thinking of encapsulating the two images in one object along with a CSS mask for one of the images that I would try to put on the same place as my background object, but so far I haven't got a worth posting snippet of code.

Could the canvas element be of some use to achieve this, I have absolutely no experience with this element so that I don't even know if it is worth looking into it.

Thanks in advance

For completeness here is the solution I ended up using inpired by @ctwheels (his solution). It uses a mask object with the background image with changed colors which is positioned with the background-position property

JSFiddle

<body>
    <div id="container">
        <div id="myImg"></div>
        <div id="myImg2"></div>
        <div id="myDiv"></div>
    </div>
</body>

#container {
    position:relative;
}
#myImg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 210px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="210"><polygon id="triangle" points="100,10 40,198 190,78 10,78 160,198" stroke="%230038b8" stroke-width="0" fill-opacity="1" style="fill: green" /></svg>');
    background-repeat: no-repeat;
}
#myDiv {
    position:absolute;
    top:50px;
    left:0px;
    height: 50px;
    width: 200px;
    background-color:red;
}
#myImg2 {
    position: absolute;
    top: 50px;
    width: 500px;
    height: 50px;
    z-index: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="210"><polygon id="triangle" points="100,10 40,198 190,78 10,78 160,198" stroke="%230038b8" stroke-width="0" fill-opacity="1" style="fill: gray" /></svg>');
    background-repeat: no-repeat;
    background-position: 0px -50px;
}

Solution

Here, I've created a fiddle

http://jsfiddle.net/ctwheels/h1y6xxf4/2/

HTML

<body>
    <div id="container">
        <div id="myImg">
            <svg height="210" width="500">
                <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:grey;fill-rule:nonzero;" />Sorry, your browser does not support inline SVG.</svg>
        </div>
        <div id="myDiv"><svg height="210" width="500">
                <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:rgba(255, 255, 255, 0.5);fill-rule:nonzero;" />Sorry, your browser does not support inline SVG.</svg></div>
    </div>
</body>

CSS

#container {
    position:relative;
}

#myDiv {
    position:absolute;
    top:0px;
    left:0px;
    background-color:red;
    clip:rect(50px, 200px, 100px, 0px);
}

I just duplicated the image from the first div to the second and changed the background color. The second div has position:absolute; inside a position:relative; div