使用CSS在图像上实现跨浏览器亮度滤镜

Question

我需要将一张全尺寸图片作为背景，并需要该图片具有亮度过滤器。

目前只在 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);
}

Safari 5.1.7适用于Windows系统无法使用，同样也不支持Internet Explorer 11.

我错过了什么？你能推荐其他的方法来完成相同的操作吗？

谢谢

- codiaf

---

Safari 5.x和IE11都不支持filter，请参见：http://caniuse.com/css-filters。 - Dai

如果你将你的图像重做为内联SVG中的<image>，并完全采用SVG技术，那么它可以在IE10中工作。（顺便提一句，Safari/Windows已经不再更新了，最后的版本是5） - Michael Mullany

Answer 1

你可以使用带有rgba()或hsla()颜色的伪覆盖层。这在所有浏览器中都可以使用，对于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/

- Kunsang

---

我认为这是一个好的解决方案，在所有常见的浏览器中都可以使用。我只会将最后一行CSS更改为“background: rgba(0,0,0,0.5);”。 - joalcego

如果您将此技巧应用于img标签，则无法正常工作，因为img不能具有:before或:after（https://lildude.co.uk/after-css-property-for-img-tag）。 - Andrew K

Answer 2

我也遇到了同样的问题。经过调查，发现是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>

- taim