通過css在鉻中的灰度

7

支持已經從當前版本19.0.1084.46

加入使-webkit-過濾器：灰度（1）將工作和比對SVG的WebKit更好，更簡單的方法.. 。

來源

2012-05-28 08:22:26 hjindal

+0

偉大工程，感謝這！ – 2012-06-05 19:59:08

2

的最新版本不工作還沒有，而Chrome 18將支持css filters（今年晚些時候發佈）。 SVG過濾器僅支持Firefox。儘管如此，你應該能夠找到一個一致的canvas + javascript解決方案。

編輯：請參閱ErikDahlström的帖子，瞭解備用解決方案。

來源

2012-01-16 02:06:04 bennedich

+1

SVG內容中的所有瀏覽器（也包括IE10）都支持SVG過濾器。但是，目前Firefox是唯一支持在HTML內容上直接使用svg過濾器的瀏覽器。 – 2012-01-17 12:27:13

+0

的確，我應該更具體地瞭解上下文。 – bennedich 2012-01-17 13:11:31

1

這是一個HTML5解決方案。當前版本的Chrome支持：http://webdesignerwall.com/demo/html5-grayscale/

來源

2012-01-16 02:36:47 henryaaron

+0

我需要一個css解決方案 – alex 2012-01-16 06:26:21

5

另一種解決方案是具有間接級別的svg。

基本上，<img src="wrapper.svg"/>其中wrapper.svg將svg過濾器應用於svg，並且svg具有指向您的柵格圖像的圖像元素。適用於Opera，Chrome，Firefox和IE10（未經測試）。

這是demo。你可以通過你自己的網址，如果你encodeURIComponent它第一。請注意，傳遞參數到工作中它依賴於腳本被啓用，所以如果你需要在img>元素或css背景圖像中使用它，你需要在服務器上生成svg文件。在WebKit的本地CSS濾鏡

來源

2012-01-17 14:11:15

+1

哇，真的很好！只是站起來;我嵌入它，必須做兩個小的調整，刪除'.toLowerCase（）'區分大小寫的url，'arr'應該是一個對象'{}'。 – bennedich 2012-01-17 15:48:07

+0

我想在懸停圖像時產生灰度效果。您的解決方案有可能嗎？ – alex 2012-01-17 22:17:01

+0

謝謝，我使用建議的修正更新了上面的示例，並添加了一個動畫示例：http：//dahlström.net/svg/filters/make-grayscale-filter-on-hover.svg#url=boston.jpg（working在Opera和Firefox中表現不錯，Chrome似乎沒有得到mouseout事件，可能這只是在單獨加載的時候，IE不支持SVG Animations）。儘管使用腳本也可以做動畫。 – 2012-01-18 09:09:39

通過css在鉻中的灰度

回答

相關問題