不同的瀏覽器

CSS濾鏡我有CSS這適用於網絡套件瀏覽器（當ALT文本顯示情況下）：不同的瀏覽器

.image { -webkit-filter: grayscale(100%) brightness(2) opacity(0.5);}

但我需要支持的其他瀏覽器如Firefox，歌劇，IE8 +

所以，我嘗試使用CSS旁邊的更新來獲得期望的結果：

.image { -webkit-filter: grayscale(100%) brightness(2) opacity(0.5); -moz-filter: grayscale(100%) brightness(2) opacity(0.5); -o-filter: grayscale(100%) brightness(2) opacity(0.5); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); }

對於IE我不認爲我蓋是用W所有的CSS屬性EB-套件。

但是這在Mozila和IE中不起作用。

活生生的例子：http://jsfiddle.net/fdf5kx5z/1/

UPDATE

當我補充一點，opacity:0.5; color: #999999那麼它變得更加接近我的期望。

來源

2014-11-06 demo

產生如果瀏覽器的兼容性是一個問題，你應該在編輯器中打開圖像，並將這些過濾器，然後保存並使用該圖像。過濾器的速度可能很慢，只有在需要動態過濾器時纔可以使用。 – 2014-11-06 10:53:56

這是用於當圖像不存在並且顯示alt-text的情況 – demo 2014-11-06 10:56:23

你可以嘗試使用由CSS後處理器生成的代碼：

.image { 
    filter: url('data:image/svg+xml;charset=utf-8, 
    <svg xmlns="http://www.w3.org/2000/svg"> 
    <filter id="filter"> 
    <feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /> 
    <feComponentTransfer color-interpolation-filters="sRGB"> 
     <feFuncR type="linear" slope="2" /> 
     <feFuncG type="linear" slope="2" /> 
     <feFuncB type="linear" slope="2" /> 
    </feComponentTransfer> 
    <feComponentTransfer color-interpolation-filters="sRGB"> 
     <feFuncA type="table" tableValues="0 0.5" /> 
    </feComponentTransfer> 
    </filter> 
    </svg>#filter'); 
    -webkit-filter: grayscale(100%) brightness(2) opacity(0.5); 
    filter: grayscale(100%) brightness(2) opacity(0.5); 
}

這是由Pleeease!

來源

2014-11-06 16:56:33 Paul

不同的瀏覽器

回答

相關問題