應用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篩選器屬性到圖像

回答

相關問題