应用CSS3筛选器属性到图像

我想只适用于图片过滤器对CSS3属性“灰度”显示在墙上不同的图片的特定部分框架区域，而不是整个图像 https://www.w3schools.com/cssref/css3_pr_filter.asp

任何想法如何做到这一点，也许通过应用一些x，y坐标来过滤？

感谢

2017-09-19 Rameez Iqbal

拿一个div，给它的形象作为背景。
现在把一个div在绘画图像中
给内心的DIV保存背景图像，但偏向背景

原油例子为演示（可能不是100 ％精确叠加）：

#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%); 
 
}

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

来源

2017-09-19 13:34:10 Martijn

感谢您有用的答案。其实我无法两次使用图片。这里是一个例子，我认为它可能有帮助 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap –

@RameezIqbal这是最好的解决方案。你能否提供你的代码，以便我们看到你在使用什么？您提供的w3school链接与您的问题无关。这只是一个链接到不同页面的图像映射。 – WizardCoder

可以使用n通过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>

来源

2017-09-21 05:48:14

应用CSS3筛选器属性到图像

回答

相关问题