Question

我需要为我的项目创建一个图像对象，当它位于另一个特定元素前面时会改变颜色，并且仍允许我移动它以使我的布局保持流畅。如果我需要使用不同颜色的图像文件，这没有问题。任何人都可以告诉我这种技术是否有名称或指向我如何实现这一目标。

以下是效果如何运作的示例

我正在考虑将两个图像封装在一个对象中，同时将一个CSS掩码用于我将尝试放在与我的背景对象相同位置的图像之一，但到目前为止我还没有值得张贴代码片段。

canvas元素是否可以用来实现这个目标，我对这个元素没有任何经验，所以我甚至不知道是否值得研究它。

提前致谢

为了完整性，这里是我最终使用@ctwheels（his solution）的解决方案。它使用蒙版对象，背景图像的颜色已更改，并使用背景位置属性

<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

在这里，我创造了一个小提琴

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:absolute; div

中有position:relative;

Answer 2

我认为这样做的唯一方法就是使用CSS过滤器，如饱和度或色调。他们的支持仍然不是那么大，我不确定如何让它为你需要的东西工作。

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

根据背景更改图像颜色

2 个答案: