Html 不同浏览器的Css过滤器

我有适用于Web工具包浏览器的css（显示alt文本时的情况）：

但我需要其他浏览器的支持，比如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工具包的所有css属性

但这在Mozila和IE中不起作用

现场示例：

---

更新

---

当我只添加

不透明度时：0.5；颜色：#9999999

这样它就更接近我的预期。

您可以尝试使用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);
}

.image{
过滤器：url（'data:image/svg+xml；charset=utf-8，
#过滤器“）；
-webkit过滤器：灰度（100%）亮度（2）不透明度（0.5）；
滤镜：灰度（100%）亮度（2）不透明度（0.5）；
}

---

这是由

生成的。如果浏览器兼容性存在问题，则应在编辑器中打开图像并应用这些过滤器，然后保存图像并改用该图像<代码>过滤器s可能非常慢，只有在需要动态过滤器时才应真正使用。这适用于缺少图像且显示alt文本的情况

.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);
}