css圖像過濾器 - 瀏覽器兼容性

我正在尋找一個平滑的解決方案來實現過濾器（模糊+不透明度）的圖像 - 工作在最流行的瀏覽器（不幸的是，IE計數以及！），我的代碼是'牛逼正常工作：css圖像過濾器 - 瀏覽器兼容性

-webkit-filter: blur(3px) opacity(40%); 
-moz-filter: blur(3px) opacity(40%); 
-o-filter: blur(3px) opacity(40%); 
-ms-filter: blur(3px) opacity(40%); 
filter: blur(3px) opacity(40%);

http://caniuse.com/#feat=css-filters

我需要SVG標記替代，太多的調整：

<svg> 
    <image ... /> 
    <filter id="test"> 
    <feGaussianBlur stdDeviation="3"/> 
    <feComponentTransfer> 
     <feFuncA type="table" tableValues="0 0.8"/> 
    </feComponentTransfer> 
    </filter> 
</svg> 

.tile:hover image{ filter:url(#test); }

必須有比這更簡單的解決辦法，我調整標記與svg一起工作太多了。

我建立可以看作here

在此先感謝您的幫助或暗示的畫廊演示！

來源

2016-06-07 fabio_p

IE只支持SVG過濾器，僅支持SVG內容。沒有其他的選擇，除非你的畫廊由靜態光柵圖像組成，在這種情況下，你可以將它們模糊成像photoshop這樣的東西。 –

CSS過濾器是175個字符。 SVG標記是195個字符。如果你想要IE支持，你必須使用SVG。它沒有那麼壞。

來源

2016-06-07 15:38:35

css圖像過濾器 - 瀏覽器兼容性

回答

相關問題