我需要为我的元素创建一个图像对象，当它位于另一个特定元素前面时会改变颜色，并且仍然允许我移动它，以便我的布局保持流畅。如果我需要不同颜色的图像文件也没问题。任何人都可以告诉我这项技术是否有名称，或者指出我如何实现这一目标的方向。
这是一个效果应该如何工作的例子
我正在考虑将两个图像封装在一个对象中，并为其中一个图像使用 CSS 掩码，我将尝试将其与背景对象放在同一位置，但到目前为止我还没有值得发布的东西代码片段。
canvas 元素是否可以用于实现此目的，我对这个元素完全没有经验，所以我什至不知道它是否值得研究。
提前致谢
为了完整性，这里是我最终使用的解决方案，灵感来自@ctwheels ( his solution )。它使用一个带有更改颜色的背景图像的蒙版对象，该对象使用 background-position 属性进行定位
<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;
}
最佳答案
在这里，我创建了一个 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);
}
我只是将图像从第一个 div 复制到第二个 div 并更改了背景颜色。第二个 div 在 position:relative; div
position:absolute;
关于jquery - 根据背景更改图像颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25384858/