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

Question

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

我想仅在相框区域应用css3滤镜属性“灰度”，而不是在整个图像上 https://www.w3schools.com/cssref/css3_pr_filter.asp

知道怎么做，可能是通过应用一些x，y coords来过滤？

由于

Answer 1

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

img {
 filter: url(#partgrey);
}

<img src="https://upload.wikimedia.org/wikipedia/commons/9/90/Jos%C3%A9_Villegas_Cordero_-_The_Slipper_Merchant_-_Walters_37105.jpg">


<svg>
  <defs>
  <filter id="partgrey" primitiveUnits="objectBoundingBox">
    <feFlood x="0.1" y="0.1" width="0.2" height="0.35"/>
    <feComposite operator="in" in="SourceGraphic"/>
    <feColorMatrix type="saturate" values="0"/>
    <feComposite operator="over" in2="SourceGraphic"/>
  </filter>
  </defs>
</svg>

Answer 2

• 拿一个div，把它作为背景给它。
• 现在在图像中放置一个div
• 将内部div作为图像保存背景，但偏移背景

作为演示的粗略示例（可能不是100％完全叠加）：

＆＃13;

＆＃13;

#Outer, #Inner{
    background-image: url('https://i.stack.imgur.com/7kczi.jpg');
}
#Outer{
    position: relative;
    width: 687px;
    height: 687px;
}
#Inner{
    position: absolute;
    left: 19%;
    top: 5%;
    width: 420px;
    height: 320px;
    background-position: 49% 10%;
     filter: grayscale(100%);
 }

＆＃13;

<div id="Outer">
    <div id="Inner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;