使用 CSS 对图像进行跨浏览器亮度过滤

我需要使用全尺寸图片作为背景，并且需要该图片具有亮度滤镜。

目前仅在进行中Chrome and 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);
}

Safari 5.1.7 为Windows不适用于此，也不Internet Explorer 11.

我缺少什么？你能推荐我任何其他方法来完成同样的任务吗？

Thanks

您可以使用带有 rgba() 或 hsla() 颜色的伪叠加。这works http://caniuse.com/#search=rgba在所有浏览器中，对于 IE8，您可以使用 -ms-filter。

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 */
}

http://jsfiddle.net/F79H8/ http://jsfiddle.net/F79H8/