Internet Explorer 10 - 如何應用灰度過濾器？

這個CSS代碼工作相當不錯的Internet Explorer 9之前Internet Explorer 10 - 如何應用灰度過濾器？

img.gray { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
}

但是，我需要的Internet Explorer 10做什麼？

來源

2013-02-11 jellobird

IE10 does not support DX filters與IE9和更早版本所做的一樣，它也不支持灰度過濾器的前綴版本。

但是，您可以在IE10中使用SVG覆蓋來完成灰度。例如：

img.grayscale:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
} 

svg { 
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); 
}

（來自：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）

簡化的jsfiddle：http://jsfiddle.net/KatieK/qhU7d/2/

更多關於IE10 SVG濾鏡效果：http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

來源

2013-02-11 18:59:57 KatieK

感謝您的建議 – jellobird 2013-02-28 17:15:56

如果沒有在CSS中引用圖片網址，有沒有辦法實現這一點？我試圖讓這個工作在一個包含多個圖像的頁面上，所以我想我可以將每個圖像添加到CSS中的

...很不錯，但它是IE！ – patrickzdb 2013-06-18 13:02:10

你應該問這是一個全新的問題。在這裏添加一個鏈接，但一定要有示例代碼（在Q和jsFiddle中），以便有人能夠理解你的目標。我很困惑，因爲你根本沒有使用URL來引用圖片。 – KatieK 2013-06-19 02:02:07

使用此jQuery插件 https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

即似乎是唯一的跨瀏覽器解決方案。加上它有一個很好的淡入淡出效果。

來源

2013-11-23 20:31:33 Corni

看起來人們一直在低調，因爲鏈接不再工作，他們懶得去查看它。所以這裏有一個新的鏈接：https：//gianlucaguarini.github.io/jQuery.BlackAndWhite/ – Sygmoral 2016-04-18 00:24:41

謝謝！我更新了我原來的帖子。 – Corni 2016-04-19 06:46:24

內嵌SVG可以在IE 10和11以及邊緣12。

我已經創建了一個稱爲灰色項目，其包括用於這些瀏覽器一填充工具來使用。該填充工具切換出<img>標籤與聯SVG：https://github.com/karlhorky/gray

實現，短版是下載的jQuery插件在上面的GitHub的鏈接，並添加的jQuery後，你的身體的末尾：

<script src="/js/jquery.gray.min.js"></script>

然後，類grayscale的每個圖像都將顯示爲灰色。

<img src="/img/color.jpg" class="grayscale">

如果您願意，也可以see a demo。

來源

2014-02-12 22:28:00

這確實是我遇到的最好的灰度JS插件，我嘗試了5個，做得很好！ – 2014-04-18 08:12:57

乾杯，很高興幫助！ – 2014-04-19 18:56:32

從2015年開始，**謝謝**！這個插件是一種拯救生命的東西，我在過去兩天一直在尋找互聯網來尋找這種類型的解決方案。 *謝謝！* – Singular1ty 2015-08-05 02:08:39

Internet Explorer 10 - 如何應用灰度過濾器？

回答

相關問題