Jquery 将CSS3过滤器属性应用于图像的特定部分

我正在做一个在墙上显示不同图片的项目，比如

我想将css3过滤器属性“灰度”仅应用于相框区域，而不是整个图像

你知道怎么做吗，也许可以用x，y坐标来过滤

谢谢

• 取一个div，将该图像作为背景
• 现在在图像中的绘画上方放置一个div
• 将背景另存为图像，但偏移背景

---

作为演示的粗略示例（可能不是100%精确覆盖）：

#外部#内部{
背景图像：url（'https://i.stack.imgur.com/7kczi.jpg');
}
#外{
位置：相对位置；
宽度：687px；
高度：687px；
}
#内在的{
位置：绝对位置；
左：19%；
最高：5%；
宽度：420px；
高度：320px；
背景位置：49%10%；
滤镜：灰度（100%）；
}

---

您可以使用通过CSS引用的SVG过滤器来过滤内容的子部分。过滤器窗口由feFlood中指定的尺寸定义

img{
过滤器：url（#partgrey）；
}

感谢您的帮助性回答。实际上，我不能使用图像两次。下面是一个例子，我认为它可能会帮助@RameezIqbal这是最好的解决方案。你能提供你的代码让我们看看你在用什么吗？您提供的w3school链接与您的问题无关。这只是一个链接到不同页面的图像地图。