1

我有适用于 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，我不认为我涵盖了所有用于 web-kit 的 css 属性。

但这在 Mozilla 和 IE 中不起作用。

现场示例：https ://jsfiddle.net/fdf5kx5z/1/

更新

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

4

1 回答 1

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 生成的！

于 2014-11-06T16:56:33.803 回答