Question

我有适用于Web-Kit浏览器的CSS（显示alt-text时的情况）：

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

但我需要支持其他浏览器，如FireFox，Opera，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，我不认为我涵盖了所有用于网络工具包的css属性。

但这在Mozila和IE中并不起作用。

直播示例：http://jsfiddle.net/fdf5kx5z/1/

更新

当我只添加opacity:0.5; color: #999999时，它会更接近我的期望。

Answer 1

您可以尝试使用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!

生成的

不同浏览器的Css过滤器

1 个答案: