Html 基于css的img交叉浏览器亮度滤波器

我需要使用一个全尺寸的图片作为背景，我需要这张图片有一个亮度过滤器

现在它只在

Chrome

和

Firefox

上工作，这是最后一个使用svg的浏览器

这就是我所拥有的：

img.fullscreenIMG 
{
   display:block;
   position:absolute;
   z-index:1;
   filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='bright30'><feComponentTransfer><feFuncR type='linear' slope='0.30'/><feFuncG type='linear' slope='0.30' /><feFuncB type='linear' slope='0.30' /></feComponentTransfer></filter></svg>#bright30");
   filter: brightness(0.6);
    -webkit-filter: brightness(0.6);
    -moz-filter: brightness(0.6);
    -o-filter: brightness(0.6);
    -ms-filter: brightness(0.6);
}

img.fullscreen img
{
显示：块；
位置：绝对位置；
z指数：1；
过滤器：url（“数据：image/svg+xml；utf8，#bright30”）；
滤光片：亮度（0.6）；
-webkit过滤器：亮度（0.6）；
-moz滤波器：亮度（0.6）；
-o型滤光片：亮度（0.6）；
-ms滤光片：亮度（0.6）；
}

适用于

Windows的Safari 5.1.7

不适用于此，也不适用于

Internet Explorer 11。

我错过了什么？你能给我推荐其他方法来达到同样的目的吗

---

谢谢

您可以使用rgba（）或hsla（）颜色的伪覆盖。在所有浏览器中，对于IE8，都可以使用-ms过滤器

body {
    width: 100%; height: 100%;    
    background: url(#bgimage) no-repeat center top/cover fixed;
}
body:before {
    position: absolute; 
    z-index: 2;
    display: block; 
    content: "";
    top: 0; right: 0; bottom: 0; left: 0;  
    background: hsla(0,0%,0%,0.5);          /*adjust brightness here */
}

---

我也遇到了同样的问题。调查结果，发现代码为IE11

<svg id="mySvg">
  <defs>
    <filter id="reduce">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5"/>
        <feFuncG type="linear" slope="0.5"/>
        <feFuncB type="linear" slope="0.5"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image filter="url(#reduce)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="test.png" width="800" height="600"/>
</svg>

Safari 5.x和IE11都不支持

过滤器，请参见：如果您将img作为内联SVG重做，并一直使用SVG，那么它将在IE10中工作。（顺便说一句，Safari/Windows是一个过时的产品，它在版本5中停止了）我认为这是一个很好的解决方案，它适用于所有常见的浏览器。我只想将最后一行css更改为“background:rgba（0,0,0,0.5）；”。如果将此技巧应用于img标记，则不起作用，因为img不能有：before或：after（）。