根据背景更改图像颜色

Question

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 这是一个效果如何起作用的示例

http://imgur.com/Vvrr6W4 http://imgur.com/Vvrr6W4

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. 我当时正在考虑将两个图像以及一个CSS蒙版封装在一个对象中，以便将其中一个图像与背景对象放置在同一位置，但是到目前为止，我还没有值得发布的代码片段。

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. canvas元素可以用于实现此目的吗，我对此元素完全没有经验，因此我什至不知道是否值得研究。

Thanks in advance 提前致谢

For completeness here is the solution I ended up using inpired by @ctwheels ( his solution ). 为了完整起见，这里是我最后使用@ctwheels（他的解决方案）表示的解决方案。 It uses a mask object with the background image with changed colors which is positioned with the background-position property 它使用具有更改后的颜色的背景图像的蒙版对象，该对象通过background-position属性定位

JSFiddle 的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;
}

Answer 1

Here, I've created a fiddle 在这里，我创造了一个小提琴

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

HTML 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 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. 我只是将图像从第一个div复制到第二个div，然后更改了背景颜色。 The second div has position:absolute; 第二个div的position:absolute; inside a position:relative; 内部position:relative; div DIV

Answer 2

Only way i can think of doing this would be using CSS filters, like saturate or hue. 我想到的唯一方法就是使用CSS过滤器，例如饱和或色相。 Still their support is not that big, and im not exactly sure how you can get it to work for what you need. 仍然他们的支持不是那么大，而且我不确定要如何使它按需要工作。

http://css-tricks.com/almanac/properties/f/filter/ http://css-tricks.com/almanac/properties/f/filter/

根据背景更改图像颜色

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-08-19 15:09:19

解决方案2
0 2014-08-19 14:14:50

根据背景更改图像颜色

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-08-19 15:09:19

解决方案2 0 2014-08-19 14:14:50

解决方案1
1 已采纳 2014-08-19 15:09:19

解决方案2
0 2014-08-19 14:14:50